CSS浏览器兼容性常见问题总结

添加微信交流群（需加微信拉您进入）

浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。

这里谈到的浏览器，主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等。 但更多的兼容还是考虑IE6/IE7/FF之间的斗争。

一、CSS HACK的方法

专用符号：（代码的顺序一定不能颠倒了）

所有浏览器 通用 height: 100px; 

IE7、FF 共用 height: 100px !important; 

 

IE7 专用 *+height: 100px; 

 

IE6、IE7 共用 *height: 100px; 

IE6 专用 _height: 100px;

 

使用IE专用的条件注释：

<!--其他浏览器 -->

<link rel="stylesheet" type="text/css" href="css.css" />

<!--[if IE 7]>

<!-- 适合于IE7 -->

<link rel="stylesheet" type="text/css" href="ie7.css" />

<![endif]-->

<!--[if lte IE 6]>

<!-- 适合于IE6及以下 -->

<link rel="stylesheet" type="text/css" href="ie.css" />

<![endif]-->

 

IE的if条件Hack

1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->

2. <!--[if IE]> 所有的IE可识别 <![endif]-->

3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->

4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->

5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->

6. <!--[if IE 6]> 仅IE6可识别 <![endif]-->

7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->

8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->

9. <!--[if IE 7]> 仅IE7可识别 <![endif]-->

10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->

11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

 

注:

gt = Great Then 大于
> = > 大于号
lt = Less Then 小于
< = < 小于号
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于

 

二、float闭合（clearing float）

网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合，这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV，这种情况一般出现在一个父DIV下包含多个子DIV。

例子

.parent{width:99%;padding:10px 0px;border:2px solid #808080;}

.parent li{float:left;width:30%;margin:0px 1%;border:1px solid #aaa;}

 

1.给父DIV也设上float

.parent-a{float:left;}

2.在所有子DIV后新加一个空DIV(不推荐，有些浏览器可以看见空DIV产生的空隙)

.clear{clear:both;height:0px;font-size:0px;} 

3.万能 float 闭合

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden; } 

4.overflow:auto

.parent-b{overflow:auto;}

5.ul的内边距和li的外边距

.parent-c{padding:0px;}
.parent-c li{margin:10px 1%;}

 

<span style="white-space:pre">	</span><h4>例子</h4>
        <ul class="parent"><li>我是div</li><li>我是div</li><li>我是div</li></ul>
        <div class="hr"></div>
        <h4>1.给父DIV也设上float</h4>
        <ul class="parent parent-a"><li>我是div</li><li>我是div</li><li>我是div</li></ul>
        <div class="hr"></div>
        <h4>2.在所有子DIV后新加一个空DIV(不推荐，有些浏览器可以看见空DIV产生的空隙) </h4>
        <ul class="parent"><li>我是div</li><li>我是div</li><li>我是div</li><div class="clear"></div></ul>
        <div class="hr"></div>
        <h4>3.万能 float 闭合</h4>
        <ul class="parent clearfix"><li>我是div</li><li>我是div</li><li>我是div</li></ul>
        <div class="hr"></div>
        <h4>4.overflow:auto</h4>
        <ul class="parent parent-b"><li>我是div</li><li>我是div</li><li>我是div</li></ul>
        <div class="hr"></div>
        <h4>5.ul的内边距和li的外边距</h4>
        <p>解决办法如上例子的写法(火狐的必须要加清除浮动)</p>
        <ul class="parent parent-c"><li>我是div</li><li>我是div</li><li>我是div</li></ul>
        <div class="hr"></div>

 

 

三、浮动IE6产生的双倍距离

例子

 

.parent{width:99%;padding:10px 0px;border:2px solid #808080;}
.parent li{float:left;width:30%;margin:0px 1%;border:1px solid #aaa;}

 

1.给float元素添加display：inline

.double li{display:inline;}

2.hack处理

.double li.first{_margin-left:0.5%;}

 

        <h4>例子</h4>
        <ul class="parent clearfix"><li>我是div</li><li>我是div</li><li>我是div</li></ul>
        <div class="hr"></div>
        <h4>1.给float元素添加display：inline</h4>
        <ul class="parent clearfix double"><li>我是div</li><li>我是div</li><li>我是div</li></ul>
        <div class="hr"></div>
        <h4>2.hack处理</h4>
        <ul class="parent clearfix"><li style="_margin-left:0.5%;">我是div</li><li>我是div</li><li>我是div</li></ul>
        <div class="hr"></div>

四、页面的最小宽度

 

 

 

例子
.parent{width:99%;padding:10px 0px;border:2px solid #808080;}
.parent li{float:left;width:30%;margin:0px 1%;border:1px solid #aaa;}

.minwt{min-width:600px;}

解决：使用CSS表达式,它实际上通过Javascript的判断来实现最小宽度

.minwt-a{min-width:600px;width:expression(document.body.clientWidth<600?"600px":"auto");}

 

        <h4>例子</h4>
        <ul class="parent clearfix minwt"><li>我是div</li><li>我是div</li><li>我是div</li></ul>
        <div class="hr"></div>
        <h4>解决：使用CSS表达式,它实际上通过Javascript的判断来实现最小宽度</h4>
        <ul class="parent clearfix minwt minwt-a"><li>我是div</li><li>我是div</li><li>我是div</li></ul>
        <div class="hr"></div>

五、chrome下默认会将小于12px的文本强制按照12px来解析。

 

例子

.fs-8{font-size:8px;}

解决办法是给其添加属性-webkit-text-size-adjust:none;进行验证后发现，在谷歌现在的新版本里已经无效。所以用了缩放

.fs-8-a{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block;text-align:left;}

 

        <h4>例子</h4>
        <div class="fs-8">chrome下默认会将小于12px的文本强制按照12px来解析</div>
        <div class="hr"></div>
        <h4>解决办法是给其添加属性-webkit-text-size-adjust:none;进行验证后发现，在谷歌现在的新版本里已经无效。</h4>
        <div class="fs-8 fs-8-a">chrome下默认会将小于12px的文本强制按照12px来解析</div>
        <div class="hr"></div>

 

 

 

 

 

六、png24位的图片在IE6下面会出现背景，gif和png8都有锯齿不好看

例子

.box-bg{width:23px;height:79px;margin:20px 40px;background:url(../images/icon_small.png) no-repeat;border:1px solid #000;}

1.利用ie6的hack问题，用两种格式的图片来表示；一种其他浏览器用png24格式的图片显示，ie6用png8格式的显示

.box-bg-a{_background:url(../images/icon_small-a.png) no-repeat;}

2.滤镜filter解决IE6下背景灰(filter里面的src这个路径是指加载滤镜的页面相对于图片的路径，而不是css文件相对于图片的路径)(a标签因为filter 失去焦点，最后加上一句 position:relative; 就获取到焦点了)

缺陷：IE6下背景无法平铺

.box-bg-b{position:relative;_background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/icon_small.png");}

3.DD_belatedPNG,解决IE6不支持PNG绝佳方案

 

<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript">   DD_belatedPNG.fix('.trans,.box a:hover');   </script>
<![endif]-->

 

 

用透明PNG作为a:hover时的背景图片,需要以”a:hover”来作为选择器. 否则可能会导致无法成功.

 

 

 

 

        <h4>例子</h4>
        <div class="box-bg"><div></div></div>
        <div class="hr"></div>
        <h4>1.利用ie6的hack问题，用两种格式的图片来表示；一种其他浏览器用png24格式的图片显示，ie6用png8格式的显示</h4>
        <div class="box-bg box-bg-a"><div></div></div>
        <div class="hr"></div>
        <h4 style="color:#ff6600;">2.滤镜filter解决IE6下背景灰(filter里面的src这个路径是指加载滤镜的页面相对于图片的路径，而不是css文件相对于图片的路径)(a标签因为filter 失去焦点，最后加上一句 position:relative; 就获取到焦点了)</h4>
        <p>缺陷：IE6下背景无法平铺</p>
        <div class="box-bg box-bg-b"><div></div></div>
        <div class="hr"></div>
        <h4>3.DD_belatedPNG,解决IE6不支持PNG绝佳方案</h4>
        <p>在网页中引用,如下:<br/>
<span style="color:green;"><!--[if IE 6]></span> <br/>
<script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script><br/>
<script type="text/javascript">     <span style="color:green;">/* EXAMPLE */ </span>  DD_belatedPNG.fix('.png_bg,.box a:hover');   <span style="color:green;">/* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/</span>   <span style="color:green;"> </script><br/> <![endif]--> </span>   </p>
        <p>用透明PNG作为a:hover时的背景图片,需要以”a:hover”来作为选择器. 否则可能会导致无法成功.</p>
        <div class="box-bg"><div></div></div>
        <div class="hr"></div>

 

 

 

 

 

七、页面居中问题(在IE7,6下足够了，但其他浏览器下失效)

例子

.box{width:300px;height:200px;text-align:center;border:1px solid #808080;}

.box div{width:100px;height:100px;background:#aaa;}

解决

.box-a div{margin:0px auto;}

 

        <h4>例子</h4>
        <h4>1.页面居中问题(在IE7,6下足够了，但其他浏览器下失效)</h4>
        <div class="box"><div></div></div>
        <div class="hr"></div>
        <h4>解决</h4>
        <div class="box box-a"><div></div></div>
        <div class="hr"></div>

八、img图片产生的间隙

 

 

 

例子

.img{border:1px solid #000;}

解决:给<img>添加样式  display:block;

.img-a img{display:block;}

 

解决:给img添加样式 img{vertical-align:top;}

.img-c img{vertical-align:top;}

<pre name="code" class="html">        <h4>例子</h4>
        <div class="img"><img  src="images/img.jpg"/></div>
        <div class="hr"></div>
        <h4>解决:给img添加样式  display:block;</h4>
        <div class="img img-a"><img  src="images/img.jpg"/></div>
        <div class="hr"></div>
        <h4>解决:给img添加样式  img{vertical-align:top;}</h4>
        <div class="img img-c"><img  src="images/img.jpg"/></div>
        <div class="hr"></div>

 

 

 

九、、DIV浮动IE文本产生3象素的bug

 

例子

.content{float:left;width:800px;}
.left{float:left;width:50%;height:200px;background:#ff9900;}
.right{width:50%;height:220px;background:#ff5500;}

解决:左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距

.mrf .right{float:left;margin-right:-3px;}

 

        <h4>例子</h4>
        <div class="hr"></div>
        <div class="content">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="hr"></div>
        <h4>解决:左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距</h4>
        <div class="hr"></div>
        <div class="content mrf">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="hr"></div>

 

 

十、私有属性（使用css3属性时，大部分都要带这些识别前缀）

-ms-transform:rotate(7deg);                //-ms代表ie内核识别码
-moz-transform:rotate(7deg);             //-moz代表火狐内核识别码
-webkit-transform:rotate(7deg);         //-webkit代表谷歌内核识别码
-o-transform:rotate(7deg);               //-o代表欧朋【opera】内核识别码
transform:rotate(7deg);                   //统一标识语句。。。最好这句话也写下去，符合w3c标准

 

十一、IE6及早期版本无法直接定义较小高度的容器

原因：就算容器里什么都没有也会有行高

解决方案：font-size:0;line-height:0;overflow:hidden;

 

十二、IE6 无法识别伪对象:first-letter/:first-line

例子

        <div class="first">
            <h1>Welcome to My Homepage</h1>
            <p>My name is Donald.</p>
            <p>I live in Duckburg.</p>
            <p>My best friend is Mickey.</p>
        </div>

 

.first p:first-letter{font-size:200%;color:#8a2be2;}
.first p:first-line{background:yellow;}

 

 

 

解决方案： 选择符与“{”之间增加空格，或者换行。

 

        <div class="first first-a">
            <h1>Welcome to My Homepage</h1>
            <p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
            <p>I live in Duckburg.</p>
            <p>My best friend is Mickey.</p>
        </div>

 

.first-a p:first-letter {font-size:200%;color:#8a2be2;}
.first-a p:first-line {background:yellow;}

十三、去掉超链接的虚线框

 

a {outline:none;blr:expression(this.onFocus=this.blur());}

 

十四、如何让table边框1个像素细

table{border-collapse:collapse;}
table th,table td{border:1px solid #ddd;}

 

添加微信交流群（需加微信拉您进入）