Analisis punca ketidakserasian pelayar css dan penyelesaian Halaman 1/2_Pertukaran pengalaman

在下不才，归纳几点html编码要素，望能指点各位：
1.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。

2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。

3.还讨论内容撑破容器问题，横向上的。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。

小实验：有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。


a.

b.

c.

d.

上面的代码在不同浏览器中是不一样的，实验起源于对小height 值div 的运用，

，小height 值要配合overflow:hidden一起使用。实验好玩而已，想说明的是，浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。

4.浮动的清除，ff下不清除浮动是不行的。

纠正大家一个误区，遇到不兼容就说ff烂是不对的，其实更多时候是ie的奇怪表现让我们无所适从。以下列出ie6的种种劣迹。

5.最被痛恨的，double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。

6.mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。

引申：ff 和ie 下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。

7.吞吃现象，限于篇幅，我就不展开了。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

8.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“ picRotate start ”方法写注释。

9.

里加 float

，这是一个典型的，棘手的兼容问题，希望引起大家正视 ，给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。

文字

, Malangnya, kesan ketinggian baris bagi teks satu baris hilang di bawah IE6. . . , sebabnya ialah Elemen blok sebaris ini ditulis bersama dengan elemen sebaris. Penyelesaian: Jadikan img dan teks terapung.

Sambungan: Semua orang tahu img Jajaran termasuk teks atas, tengah, absmiddle dan sebagainya Anda boleh cuba melaraskan img. Jadikan mereka konsisten dengan teks dalam IE dan FF Anda akan mendapati bahawa tidak kira bagaimana anda menyesuaikannya, anda tidak akan berpuas hati. Hanya biarkan img dan teks terapung dan laraskannya dengan jidar.

13 Status tuding pautan. a:hover img{width:300px} Kami mahu lebar imej yang terkandung dalam pautan berubah apabila tetikus melayang Malangnya, ia tidak sah di bawah ie6 dan sah di bawah ie7 dan ff.

14. Status tuding tidak dipaut. Gaya div:hover{} tidak dikenali oleh IE6 dan hanya akan berfungsi di bawah IE7 dan FF.

15 Pautan yang disekat mempunyai lapisan mutlak di dalamnya, dan img diletakkan di dalam lapisan mutlak Di bawah IE, mengklik img dengan tetikus tidak akan mempunyai kesan pautan, tetapi ia akan menjadi perkara biasa di bawah ff dan op.

Saya tidak dapat memikirkan apa-apa, saya akan menambah lagi nanti jika saya memikirkannya. Jika anda menguasai rahsia banyak masalah di atas, 90% daripada masalah ketidakserasian tidak memerlukan hack CSS baharu.

16 Terapung yang tidak boleh dibersihkan sepenuhnya. Jika li di bawah ul mempunyai atribut apungan, bagaimana untuk mengosongkan li terapung?

• class=”c”>

atau

class=”c”>

atau

class=”c”>

Atau gabungan di atas? Saya tidak dapat memberikan jawapan kepada soalan ini. Berikut ialah contoh yang berkaitan dengan ini



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

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

• sfsdfsfdf


• sfsdfsfdf

class=c>

sfsdfsfdf

Sila uji di bawah IE, tukar sahaja margin-top:19px ditukar kepada margin-top:20px Apa yang awak jumpa? Elemen: doctype mesti ada, margin-top:19px baik di bawah ie6 dan ie7, margin-top:20px Sesuatu telah berlaku dan saya tidak dapat menjelaskannya. . . Anda juga boleh menukar lapisan jelas kepada kedudukan yang berbeza untuk ujian.

Penyelesaian: Tambahkan zum:1 pada atribut ul (menambah zum:1 kepada li tidak berguna)

Sambungan: Lapisan yang jelas harus digunakan secara bersendirian. Mungkin anda meletakkan atribut jelas terus ke dalam lapisan kandungan di bawah untuk menyimpan kod Ini bermasalah Bukan sahaja kesan margin akan hilang di bawah ff dan op, tetapi beberapa nilai margin juga akan menjadi tidak sah di bawah ie.

dd

ff

17.iaitu di bawah limpahan:tersembunyi ia tidak sah untuk kedudukan lapisan mutlak:mutlak atau kedudukan lapisan relatif:relatif. Penyelesaian: Tambahkan kedudukan:relatif atau kedudukan:mutlak kepada limpahan:tersembunyi. Selain itu, ie6 menyokong ciri limpahan-x atau limpahan-y, tetapi ie7 dan ff tidak menyokongnya.

Pepijat yang serius di bawah 18.iaitu6 Jika elemen apungan tidak mempunyai lebar yang ditentukan, dan jika terdapat div di dalamnya yang mentakrifkan ketinggian atau zum:1, div akan mengisi keseluruhan baris, walaupun anda memberi. ia lebar. Jika elemen apungan digunakan untuk susun atur atau sebagai bekas kompleks, ia mesti diberi lebar.

Pepijat di bawah 19.iaitu6, div yang diposisikan secara mutlak mengandungi div yang agak kedudukannya Jika ketinggian div yang agak kedudukannya dalam lapisan dalam diberi nilai ketinggian tertentu, lapisan relatif dalam lapisan dalam akan. mempunyai nilai lebar 100%, dan lapisan luar akan mempunyai nilai lebar 100%. Penyelesaiannya adalah untuk memberikan lapisan dalam atribut apungan kepada lapisan relatif.

Pepijat di bawah 20.iaitu6, Dalam kes target="_blank"/>, teks dalam lapisan apungan di bawah lapisan position:relative tidak boleh dipilih. Pepijat ini memaksa saya membetulkan pustaka gaya biasa.

21 Akhirnya ada kekurangan ff. Width:100% sangat mudah digunakan dalam IE Ia akan mencari lapisan nilai lebar mengikut lapisan ke atas, mengabaikan pengaruh lapisan terapung, dan mencari di bawah ff sehingga penghujung lapisan terapung hanya menambah lebar: 100% kepada semua lapisan terapung di tengah Itu sahaja, saya letih. Opera mempelajari ini dengan baik dan diikuti iaitu.