Perbezaan dan penyelesaian antara CSS di bawah IE dan FIREFOX Halaman 1/2_Pertukaran pengalaman

CSS mempunyai nilai tinggi untuk keserasian penyemak imbas Biasanya terdapat perbezaan penghuraian yang besar antara IE dan Firefox.
Penghuraian ketinggian
IE: Akan berubah mengikut ketinggian kandungan, termasuk kandungan imej dengan ketinggian yang tidak ditentukan Walaupun ketinggian ditakrifkan, apabila kandungan melebihi ketinggian, ketinggian sebenar akan digunakan
Firefox: Tiada ketinggian ditentukan Apabila, jika kandungan termasuk kandungan imej, analisis ketinggian MF adalah berdasarkan piawaian percetakan, yang akan menyebabkan keadaan ketinggian tidak konsisten dengan kandungan sebenar apabila ketinggian ditakrifkan tetapi kandungan melebihi ketinggian, kandungan akan melebihi ketinggian yang ditetapkan Walau bagaimanapun, gaya yang digunakan di kawasan itu tidak akan berubah, menyebabkan gaya tidak sejajar.
Kesimpulan: Adalah lebih baik untuk menentukan ketinggian apabila anda boleh menentukan ketinggian kandungan Jika benar-benar tidak ada cara untuk menentukan ketinggian, sebaiknya jangan gunakan gaya sempadan, jika tidak gaya pasti akan keliru. !

Analisis alt dan tajuk objek img
alt: gesaan apabila foto tidak wujud atau ralat memuatkan
tajuk: penerangan petua foto.
Jika tajuk tidak ditakrifkan dalam IE, alt juga boleh digunakan sebagai hujung img, tetapi dalam MF, kedua-duanya digunakan betul-betul seperti yang ditakrifkan dalam piawai

Kesimpulan: Apabila mentakrifkan objek img, akhirnya Tulis semua objek alt dan tajuk untuk memastikan ia boleh digunakan secara normal dalam pelbagai pelayar

Perbezaan terperinci lain
Apabila anda menulis css, terutamanya gunakan float: kiri (atau kanan ) Semasa menyusun gambar, anda akan mendapati bahawa mereka adalah normal dalam Firefox tetapi mempunyai masalah dalam IE. Tidak kira anda menggunakan margin: 0 atau sempadan: 0 untuk mengekang, ia tidak akan membantu.

Malah, terdapat satu lagi masalah di sini, iaitu cara IE mengendalikan ruang, tetapi IE mengendalikan ruang antara blok. Maksudnya, a p hendaklah ditulis sejurus selepas penghujung p, tanpa pemulangan gerabak atau ruang di tengah. Jika tidak, mungkin terdapat masalah, seperti sisihan 3px, dan sebabnya sukar dicari.

Malangnya, saya menghadapi masalah ini sekali lagi. Berbilang teg img disambungkan, dan kemudian apungan: kiri saya harap gambar ini boleh disambungkan. Tetapi hasilnya adalah normal dalam firefox tetapi setiap img yang dipaparkan dalam IE adalah 3px. Saya mengalih keluar ruang antara tag tetapi ia tidak berfungsi.

Penyelesaian kemudian adalah untuk membalut li di luar img dan menentukan margin: 0 untuk li Ini menyelesaikan sisihan paparan antara IE dan firefox. Tafsiran IE terhadap beberapa model akan menghasilkan banyak ralat, dan hanya melalui percubaan berulang boleh sebabnya ditemui.

2. DIV Bersarang: Penyelesaian kepada masalah bahawa ketinggian DIV induk tidak boleh berubah secara automatik mengikut DIV anak

<div id="parent"> 
<div id="content"> </div> 
</div>

Apabila terdapat banyak kandungan, walaupun jika ibu bapa menetapkan ketinggian kepada 100% atau auto, dalam Regangan automatik masih tidak berfungsi dengan betul di bawah pelayar yang berbeza. Penyelesaian

<div id="parent"> 
<div id="content"></div> 
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> 
</div>

Buat ruang dengan ketinggian 1 di bahagian bawah lapisan untuk menyelesaikan masalah ini

3 nota kajian CSS DIV

1 div setiap blok mesti mempunyai id sendiri, untuk mengelakkan blok dengan fungsi berbeza daripada menggunakan id/kelas yang sama

2. Setiap div blok yang lebih besar diikuti dengan Tandakan permulaan dan akhir

3. Cara lain untuk menyembunyikan teks TEKS-INDENT: -9999px; LINE-HEIGHT: 0

4. Pandai mengendalikan penjajaran Dua lajur:

1 )
Lajur kanan ialah P, lebar=44.5%, apung=kiri
Lajur kiri ialah P.pertama, sempadan-kanan: #a7a7a7 1px pepejal, lebar=45%
2)
lajur kanan#kanan, jidar-kiri:50%
lajur kiri#kiri, apung=kiri,lebar=50% sempadan-kanan:#a7a7a7 1px pepejal

di atas Perkara utama kedua-dua kaedah ialah untuk memilih salah satu daripadanya sebagai float=left

5. Tukar gambar secara rawak:

#random { 
BACKGROUND: url(/rotate.php); 
}

Kaedah ini sangat bijak.

4 Mengenai penyesuaian ketinggian div
Hari ini Xiaowei meminta saya untuk membantunya menyelesaikan masalah untuk halamannya, iaitu penyesuaian ketinggian div, iaitu, bersarang kiri dalam div induk Di sana ialah dua div kanak-kanak di sebelah kanan Kandungan div kanak-kanak di sebelah kanan boleh dikembangkan tanpa had, dan ketinggian div induk boleh diregangkan tanpa had Menggunakan kaedah susun atur umum, ia boleh dilayari dengan betul dalam IE, dan ketinggian div induk dalam Mozilla Ia ditetapkan pada kira-kira 10px dan tidak boleh menyesuaikan diri dengan ketinggian, begitu juga height:auto Apa yang perlu saya lakukan? Saya merujuk artikel di Internet Untuk mencapai ketinggian penyesuaian, lapisan div mesti mempunyai atribut apungan, jadi saya mula mencuba Jika float:left digunakan, div akan pergi ke bahagian paling kiri halaman handle. Saya berada di luarnya. Tambah satu lagi lapisan div dan tetapkan kedudukannya, walaupun float: left inside dialihkan.

xhtml:

================================================ =======================

<div id="container_father"> 
<div id="container"> 
<div id="panel"> test<br /> 
test<br /> 
test<br /> 
<!-- id="panel" --> 
</div> 
<div id="sidebar"> 
<ul> 
<li class="current">预安装检查</li> 
<li>阅读 PFC 授权协议</li> 
<li>初始化数据库</li> 
<li>完成安装</li> 
</ul> 
<!-- id="sidebar" --> 
</div> 
<!-- id="container" --> 
</div> 
</div>

CSS
============== ==================================

#container_father { 
margin-left: auto; 
margin-right: auto; 
padding: 0px; 
width: 750px; 
} 

#container { 
width: 750px; 
border: 1px solid #cccccc; 
padding: 8px; 
margin: 0px; 
background-color: #F1F3F5; 
float: left; 
}

5、 深入标准 ~ The IE Doubled Float-Margin Bug(IE双倍浮动边界Bug)
什么发生故障？

一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！

情况应该如何？

下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界，使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止，一直都还不错。

 .floatbox { 
float: left; 
width: 150px; 
height: 150px; 
margin: 5px 0 5px 100px; 
/*This last value applies the 100px left margin */ 
}

陈旧的IE“双倍占据”

原样的相同代码被在IE/Win中浏览时以些微不同的方式显示，下面的图释展示了IE/Win在布局上所做的。

这为什么会发生？别问这种傻问题！这就是IE，记得吗？符合标准只是理想的状况，不指望实现，这个简单的事实正验证了。

重点

这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界同样神秘地显示在居右的相同方式。

最后，修复办法！

直到现在(04年1月)这个Bug一直被认为是无法修复的，通常用来替代错误的边界的控制方法如：一个不可视浮动元素的左边距，连同一个内嵌的盒子一起，可视的盒子装在不可视浮动元素里；或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了，但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。

Steve Clason发现了一个修复办法，描述在他的Guest Demo里，修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法，使用一个属性来修复影响不相关属性的Bug。

现在如何来做？

研究它，简单地将{display: inline;}设置给浮动元素就是全部所需做的！是的，听起来太简单了，不是吗？不过这是真的，仅仅一个display的"inline"声明已经能够胜任了。

熟悉规则的人知道浮动元素自动设置为"block"元素，而不管他们之前是什么。就如Steve从W3C里指出：

9.5.1 Positioning the float: the 'float' property 

"This property specifies whether a box should float to the left, right, or not at all. It may be set for 
elements that generate boxes that are not absolutely positioned. The values of this property have the following
 meanings: 

left 
The element generates a block box that is floated to the left. Content flows on the right side of the box, 
starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the 
value 'none'. 

right 
Same as 'left', but content flows on the left side of the box, starting at the top. 

none 
The box is not floated. "

这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。因而，这个修复办法可以被直接应用，而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙，只要把这个修复装入IE独用的Tan Hack里，细节如同IE Three Pixel Text-Jog Demo。

下面是两个使用了前面相同代码的生动演示，第一个照常显示了IE的Bug，下一个对浮动元素使用了"inline"修复。

.floatbox { 
float: left; 
width: 150px; 
height: 150px; 
margin: 5px 0 5px 100px; 
display: inline; 
}

以上就是IE和FIREFOX下CSS的区别与解决方法第1/2页_经验交流的内容，更多相关内容请关注PHP中文网（www.php.cn）！