image de fond Centré est désactivée par 1px

Ma page Web se trouve dans un DIV qui est 960px de large, je centre DIV au milieu de la page en utilisant le code:image de fond Centré est désactivée par 1px

html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;} 
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}

J'ai besoin de l'image d'arrière-plan le html/body à carreler au milieu de la page, ce qu'il fait, cependant si le panneau visible dans le navigateur est un nombre impair de pixels, alors l'arrière-plan centré et le DIV centré ne s'alignent pas ensemble.

Cela ne se produit que dans FF.

Est-ce que quelqu'un sait d'une solution de contournement?

Source

2008-09-22 cole

Oui, c'est un problème connu. Malheureusement, vous ne pouvez corriger que la largeur de div et d'image, ou utiliser un script pour modifier dynamiquement la propriété stye.backgroundPosition. Une autre astuce consiste à exprimer la définition de la classe CSS.

Source

2008-09-22 05:08:00 dimarzionist

FF @ erreur? Damn ... déteste quand mon copain me manque. – mpen

Le problème (le plus commun) est que votre image d'arrière-plan a un nombre impair alors que votre conteneur est un nombre pair. J'ai écrit un article dans mon meilleur anglais sur où j'explique également comment le navigateur a positionné votre image: check it out here.

Source

2008-10-24 15:34:04

J'ai trouvé qu'en faisant l'image de fond sur un nombre impair de pixels, le problème disparaît pour Firefox.

Rembourrage de réglage: 0px 0px 0px 1px; résout le problème pour IE.

Carlo Capocasa, Travian

Source

2009-10-09 15:52:06 cmc

j'ai pu résoudre ce avec jQuery:

$(document).ready(function(){ 
$('body').css({ 
    'margin-left': $(document).width()%2 
}); 
});

Source

2011-01-20 13:06:09 Tom

J'ai eu le même problème.

Pour obtenir l'arrière-plan centré, vous devez avoir un background-image plus large que la fenêtre. Essayez d'utiliser un arrière-plan 2500px large. Cela forcera le navigateur à centrer la partie de l'image visible. Faites-moi savoir si cela fonctionne pour vous.

Source

2012-05-23 18:09:14

Ce n'est pas le problème. Le problème est que chaque navigateur a une manière différente d'arrondir la largeur de la fenêtre à un nombre entier. Certains navigateurs utilisent le plafond (le plus grand nombre suivant) ou le plancher (le nombre sans fraction). – rxgx

Que diriez-vous de créer un div wrapper avec la même image de fond. L'enveloppe a un nombre pair, l'arrière-plan conservera la même position sur n'importe quelle taille d'écran.

Source

2013-06-22 19:18:26

image de fond Centré est désactivée par 1px

Répondre

Questions connexes