CSS-bedingte Annotation Theorie und Praxis Quelldatei_Erfahrungsaustausch

Theorie der bedingten Browserkommentare: Verwenden Sie das folgende Beispiel, um dieses Problem zu erläutern

(X)HTML

Der folgende Code dient zum Testen der Wirkung bedingter Kommentaranweisungen unter dem IE-Browser von Microsoft








Der folgende Code ist ein Bedingter Kommentar, der unter einem Nicht-IE-Browser ausgeführt wird

Sie verwenden keinen Internet Explorer

Funktioniert schließlich unter Nicht-IE- und speziellen IE-Browsern
(oder verwenden Sie lte lt oder gt gte zur Beurteilung, wie zum Beispiel:

).

Sie verwenden Internet Explorer Version 6

oder einen Nicht-IE-Browser

Von: cssplay.co.uk/menu/conditional.html" target="_blank">http://www.cssplay.co.uk/menu/conditional .html

Die oben erwähnte bedingte Annotation dient dazu, den Browsertyp zu bestimmen und dann zu definieren, welcher Inhalt in welchem ​​Browser angezeigt wird.

Dieses Drop-Down-Menü-Modell stammt von cssplay, damit der Autor es tun kann erstellt nach vielen Recherchen und wiederholten Tests. Ich möchte dieses Modell verwenden, um das Prinzip der bedingten Annotation zu üben 🎜>

• Zero-Dollar-Werbeseite
  
Text um Bilder umbrechen

gestaltetes Formular

CSS



utilise le double styles, définissez les styles pour ie et non-ie respectivement. S'il s'agit d'IE, ajoutez un final_drop_ie.css basé sur final_drop.css

Regardez d'abord comment le CSS sous non-ie est défini
.menu. ul li ul {
display: none;
}
/* spécifique aux navigateurs non IE */
.menu ul li:hover a {
color:#fff
background; :#bd8d5e ;
}
/*Définir le style de survol*/
.menu ul li:hover ul {
display:block;
position:absolute;
margin-top:1px;
left:0;
width:150px
}


Sous non-IE, vous pouvez voir l'ul contenu dans li lorsque le curseur de la souris s'affiche car ces navigateurs prennent en charge l'utilisation de li:hover

css sous IE
.menu ul li a:hover {
color:#fff;
background:#bd8d5e;
}
/*Le ul contenu dans li s'affiche au survol de la souris*/
.menu ul li a:hover ul {
display:block
position:absolute
top : 3em ;
gauche :0 ;
arrière-plan :#fff ;
margin-top :1px
}

Hériter ; le final_drop ci-dessus. style css, quand il n'y a pas de temps de souris, le ul contenu dans li ne s'affiche pas
car


et l'effet de l'afficher via li:hover sous IE7 est le même