添加微信交流群(需加微信拉您进入)
浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。
这里谈到的浏览器,主要指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;}
添加微信交流群(需加微信拉您进入)