Théorie et pratique de l'annotation conditionnelle CSS source file_experience échange

Théorie des commentaires conditionnels du navigateur, utilisez l'exemple suivant pour expliquer ce problème

(X)HTML

Le code suivant permet de tester l'effet des instructions de commentaires conditionnels sous le navigateur IE de Microsoft








Le code suivant est un commentaire conditionnel qui s'exécute sous un navigateur non-IE

Vous n'utilisez pas Internet Explorer

Fonctionne enfin sous les navigateurs non-IE et IE spéciaux
(ou utilisez lte lt ou gt gte pour juger, comme :

).

Vous utilisez Internet Explorer version 6

ou un navigateur non IE

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

L'annotation conditionnelle mentionnée ci-dessus consiste à déterminer le type de navigateur, puis à définir quel contenu est affiché dans quel navigateur

Ce modèle de menu déroulant (menu déroulant) provient de cssplay, afin que l'auteur puisse l'être. réalisé après de nombreuses recherches et tests répétés. Je souhaite utiliser ce modèle pour mettre en pratique le principe de l'annotation conditionnelle

DEMOS

<.>

• dans IE7 -->
  

  
  
  Page de publicités zéro dollars
  
  
  
  
  
  
  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