CSS的兼容性与BUG处理
骨灰级清除浮动
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
*zoom:1; //兼容ie}内联元素相连之间存在间隙问题
原因:内联元素是当做字体来处理的，字体之间是有间隔的
解决方法:
1.多个标签写在一行
2.将要闭合标签的地方与开始标签的地方重合
3.使用注释头尾相连
4.在父级上写：font-size:0;
5.使用display：block(img是内联元素)
6.使用letter-spacing属性
块级元素包裹内联元素的时候，总会出现几像素的差问题
<!--例子1--><p><img src="http://images.cnblogs.com/cnblogs_com/zqzjs/757818/o_u=3986871593,628400456_fm=21_gp=0.jpg"></p><!--例子2--><ul><li><img src="http://images.cnblogs.com/cnblogs_com/zqzjs/757818/o_u=3986871593,628400456_fm=21_gp=0.jpg"></li></ul><!--例子3--><p><span>asdasdasd</span></p>
解决方法：设置内联元素属性:display:block;
CSS垂直居中方法
使用时一定要给出元素宽高
width: 200px; height: 200px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
CSS Hack
指的是针对不同的浏览器写对应的CSS
有三种hack方式
1.html hack(添加不同的类来区别)
<!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]--><!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]--><!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]--><!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->
2.选择器 hack
* html .test{color:#090;} /* For IE6 */* + html .test{color:#ff0;} /* For IE7 */3.属性hack
color:#fff\0; /*：选择IE8+和Opera*/color:#090\9; /* For IE浏览器 */*color:#f00; /* For IE7 */_color:#ff0; /* For IE6 */
ie6.7不支持box-sizing: border-box问题
解决:使用https://github.com/Schepp/box-sizing-polyfill这个垫片,稳定性差
注意：*behavior: url(../resource/js/lab/boxsizing.htc);这个URL是相对于HTML页面的！！
ul中li下面的间隔线用li布局边框问题
在IE低版本下有bug，会多出li的宽高
解决:间隔线使用li的border去做
ie8及以下的浏览器不支持:befor.:after问题
使用left:expression(eval(document.documentElement.scrollLeft))与top:expression(eval(document.documentElement.scrollTop))
.leftTop{
position:absolute;
left:expression(eval(document.documentElement.scrollLeft));
top:expression(eval(document.documentElement.scrollTop));}低版本浏览器下position:fixed闪动问题
解决:
*html{
background-image:url(about:blank);
background-attachment:fixed;}IE6双倍margin,padding边距的问题
内部元素一旦浮动，就会出现双倍的BUG
解决:给内部元素添加display:inline属性
IE6中设置宽高位10px的时候出现的是长方形问题
这个现象的另一种情况是:在IE6中定义比较小的高度问题。
原因:IE6有默认行高
解决：使用font-size:0;line-height:0;
IE6无法识别伪对象:first-letter/:first-line问题
类似这样解决:
p:first-letter {}
在first-letter与"{"间增加空格
IE6下忽略!important问题
如下写法在IE6下不起作用
p{
color:#f00!important;
color:#000;}解决:更改写法
p{color:#f00!important;}p{color:#000;}父元素与子元素之间的margin-top问题(BFC问题)
现象:给第一个子元素设置margin-top属性后，父元素也会下移
代码示例:
<style type="text/css">
.wrapper {
position: relative;
width: 500px;
height: 500px;
background-color: #ddd;
}
.content{
background-color:#6699FF;
width:200px;
height:200px;
}
</style><p class="wrapper">
<p class="content"></p>
</p>解决:
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
2、为父元素添加overflow：hidden；样式即可（完美）
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1px solid transparent可用）
5、为父元素或者子元素声明绝对定位
元素浮动导致父元素塌陷问题
见例子:
<p class='outer' style="width: 300px;background-color: gray"> <p class='innner' style="width: 100px;height: 100px;background-color: blue;float: left;"></p> </p>
解决方法：
1.给父元素添加overflow:hidden属性
2.给父元素添加清除浮动伪类
.outer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}IE6挨着的p元素产生3像素差值问题
解决:使用绝对定位然后内补边
相邻的块状元素margin叠加问题(BFC问题)
见例子:
p{
margin-bottom: 100px;
margin-top: 100px;
}
... <p>
<p>asdasdasdas中国</p>
<p>asdasdasdas中国</p>
<p>asdasdasdas中国</p>
</p>结果p直接的margin发生了合并变成了50px。
解决:给最后一个p元素添加left/right浮动，触发BFC。
更多CSS的兼容性与BUG处理相关文章请关注PHP中文网！
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Membuat Bragdoc anda sendiri dengan sebelas
Mar 18, 2025 am 11:23 AM
Tidak kira tahap tahap anda sebagai pemaju, tugas yang kami selesaikan -sama ada besar atau kecil -membuat kesan besar dalam pertumbuhan peribadi dan profesional kami.
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Mari kita gunakan (x, x, x, x) untuk bercakap mengenai kekhususan
Mar 24, 2025 am 10:37 AM
Saya hanya berbual dengan Eric Meyer pada hari yang lain dan saya teringat cerita Eric Meyer dari tahun -tahun pembentukan saya. Saya menulis catatan blog mengenai kekhususan CSS, dan
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
