IE bugs - couleur d'arrière-plan et le positionnement

Question

Je commence juste à construire un site Web, et je suis juste en train d'étoffer le CSS.

Deux problèmes:

1. J'utilise rgba pour obtenir un fond transparent, et en utilisant un png transparent pour imiter ce dans les navigateurs plus anciens. J'utilise une cascade comme ceci:

   rule { 
       background: url(/media/img/white_0.9_pixel.png); 
       background: rgba(255, 255, 255, 0.9); 
   } 
   

Dans IE ces arrière-plans ne couvrent pas l'ensemble des sections, ils sont appliqués à ... Toutes les idées pourquoi?

2. Le menu déroulant est incorrectement placé dans IE. Je le positionne absolument, mais en ajoutant une marge pour le mettre au bon endroit dans Webkit - deviner que c'est la mauvaise façon d'aligner une liste déroulante, et cela ne fonctionne pas à travers les navigateurs. Des suggestions là-bas?

Merci beaucoup - juste écrire des questions sur ce site m'aide à réfléchir!

Un lien vers le site: http://bit.ly/11GGCx

Answer 1

Quelles sont les versions IE présentent les problèmes?

1. Comme avec de nombreux bugs d'IE, essayez de donner layout aux éléments ayant des antécédents mal rendus.

2. Lorsque vous ne spécifiez pas la propriété "left" d'un élément positionné de manière absolue, IE génère rarement la valeur souhaitée. Selon la spécification CSS 2.1, "left" doit être défini sur static position, mais le navigateur peut deviner cette position, il est donc préférable d'être explicite. La méthode standard consiste à donner aux éléments de menu un positionnement relatif pour créer un containing block pour chaque sous-menu et définir les paramètres "haut" et "gauche" pour les sous-menus.

   .nav li { 
       position: relative; 
       /* note: don't set a box offset (e.g. "left") here */ 
   } 
   .nav ul { 
       position: absolute; 
       top: 1em; 
       left: 0; 
   } 
   

Answer 2

Avez-vous spécifié background-repeat?

Answer 3

Avez-vous essayé avec le concept d'opacité css?

Essayez le code ci-dessous.

rule { 
background: #fff; 
opacity: .5; 
-moz-opacity: 0.5; 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* for IE8 *//* Comes First to apply optacity in all ie versions*/ 
filter: alpha(opacity=50); /* for IE5-7 *//* Comes second to apply opacity in all ie versions*/ 
} 

Remarque: ne modifiez pas l'ordre des lignes ci-dessus. Aussi, je recommande de ne pas utiliser l'arrière-plan rgba.

Essayez ceci. Espérons que cela aide