émet box-shadow CSS

Question

Je construis cette page: http://ss.rsportugal.org/

Comme vous pouvez le voir, il y a deux 10 ombres de pixels dans la page. Un juste beugler le menu et l'autre juste au-dessus de la barre de pied de page. Ces ombres sont effectuées à l'aide box-shadow: 0 0 10 rgba(...);

Il fonctionne comme prévu dans le moteur WebKit et pour une raison que je suis incapable de comprendre et je pouvais utiliser des yeux frais sur ce point, Gecko et Opera ajouter 5 pixels supplémentaires à #header largeur et pas à #footer-container, faisant apparaître une barre de défilement horizontale sur le corps. Fonctionne aussi bien si je supprime la boîte-ombre, mais je veux en quelque sorte le garder.):

Answer 1

Cest parce que vous définissez la largeur à 100% donc après que le box-shadow est ajouté son 100% + 10px (le beign 10px divisé entre les deux côtés). Si vous avez utilisé position:fixed; sur l'en-tête, vous n'auriez pas le problème. Il fait la même chose dans Safari en passant, donc webkit est effectué. Ce que vous pouvez faire est de les emballer dans un conteneur et de le mettre à 100% avec overflow:hidden puis sur l'élément intérieur faites-le également 100% avec l'ombre de la boîte comme désiré ... de cette façon, il sera coupé sur les côtés gauche/droit.

Quelque chose comme:

<style type="text/css"> 
    #header { 
    background:none repeat scroll 0 0 rgba(0, 0, 0, 0.7); 
    left:0; 
    overflow:hidden; 
    position:absolute; 
    top:0; 
    width:100%; 
    z-index:4; 
    } 
    #header-inner { 
    width: 100%; 
    -moz-box-shadow: 0pt 0pt 10px rgb(0, 0, 0); 
    } 
</style> 
<div id="header"> 
<div id="header-inner"> 
    <div id="logo"> 
     ... 
    </div> 
    <div id="menu-background"></div> 
    <div id="menu-wrapper"> 
     ... 
    </div> 
</div> 
</div> 

Answer 2

Essayez de vérifier la taille de la boîte.

Webkit utilise un modèle de boîte différent pour le dimensionnement de boîte que FF. IE diffère des deux.

Assurez-vous de déclarer le même type pour tous les navigateurs, et tout devrait être traité dans le même modèle de boîte, sans faire de mauvaises surprises.

Answer 3

Il semble que vous avez déjà résolu le site, mais il semble que c'est un known bug que je débarquai le correctif pour la semaine dernière (si le correctif doit être dans Firefox 4 beta 8, bien que nous n'ayons pas encore envoyé de beta 7).