Analyse des causes d'incompatibilité des navigateurs CSS et solutions Page 1/2_Échange d'expérience

，这是一个典型的，棘手的兼容问题，希望引起大家正视 ，给li 不同的属性会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。

10.使用了“float:left;display:inline”的ul的奇怪表现。可以看出这句css是针对ie6下的double margin bug 而加上的display:inline，这也是我的css体系里的重要一环，在《ul使用心得》一文中有相关阐述。而这句css用在ul上会让你痛苦不堪。点到为止，这里不能多说哈。  

11.img下的留白，大家看这段代码有啥问题：

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写



后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。

12.失去line-height。, Malheureusement, l'effet de hauteur de ligne du texte sur une seule ligne disparaît sous IE6. . . , la raison est Cet élément inline-block est écrit avec l'élément inline. Solution : faites en sorte que l'image et le texte flottent.

Extension : tout le monde le sait img L'alignement inclut le texte en haut, au milieu, au milieu, etc. Vous pouvez essayer d'ajuster l'image. Rendez-les cohérents avec le texte dans IE et FF, et vous constaterez que peu importe la façon dont vous les ajustez, vous ne serez pas satisfait. Laissez simplement l'image et le texte flotter et ajustez-les avec une marge.

13. Le statut de survol du lien. a : survoler l'image {largeur : 300 px} Nous souhaitons que la largeur de l'image contenue dans le lien change au survol de la souris. Malheureusement, elle n'est pas valide sous ie6 et valable sous ie7 et ff.

14. Statut de survol non lié. Le style div:hover{} n'est pas reconnu par IE6 et ne fonctionnera que sous IE7 et FF.

15. Le lien bloqué a un calque absolu à l'intérieur, et une img est placée à l'intérieur du calque absolu, cliquer sur l'img avec la souris n'aura pas d'effet de lien, mais ce sera normal. sous ff et op.

Je n’en trouve aucun, j’en ajouterai plus plus tard si j’y pense. Si vous maîtrisez les secrets de bon nombre des problèmes ci-dessus, 90 % des problèmes d'incompatibilité ne nécessiteront pas un nouveau hack CSS.

16. Flotteur qui ne peut pas être complètement dégagé. Si le li sous ul a l'attribut float, comment effacer le li flottant ?

• class=”c”>

ou

class=”c”>

ou

Ou une combinaison de ce qui précède ? Je ne peux pas donner de réponse à cette question. Voici un exemple lié à ceci

type=text/css>
.c{clear:both;overflow:hidden;+overflow:visible}
.bd{border:1px solid red}

ul.ex{list-style:none;}
ul.ex li{float:left;border:1px solid green;}

• sfsdfsfdf


• sfsdfsfdf

class=c>

dd