IE6 IE7 IE8三大浏览器的CSS兼容速查表 - Go语言中文社区

IE6 IE7 IE8三大浏览器的CSS兼容速查表


IE每个新版本的推出,就不可避免地在IE的各个主要版本之间产生兼容问题,尽管IE8推出已有时日,使用IE6的用户仍然相当可观。本文以速查手册的形式介绍CSS(2.1和3)在IE6,IE7,IE8三个版本之间的兼容情况。

IE6,IE7,IE8 CSS兼容速查表

现代Web设计与开发越来越看重浏览器兼容问题,IE每个新版本的推出,都在CSS的标准化方面前进一大步,同时,也就不可避免地在IE的各个主要版本之间产生兼容问题,尽管IE8推出已有时日,使用IE6的用户仍然相当可观。本文以速查手册的形式介绍CSS(2.1和3)在IE6,IE7,IE8三个版本之间的兼容情况。

1.居中问题

div里的内容,IE默认为居中,而Firefox默认为左对齐
可以尝试增加代码margin:auto

2.高度问题

两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在Firefox中会出现两个div重叠的现象;但在IE中,下面的div会自动给上面的div让出空间
所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是height:100%;
但当这个div里面一级的元素都float了的时候,则需要在div块的***,闭和前加一个沉底的空div,对应CSS是:
.float_bottom{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3.clear:both

不想受到float浮动的,就在div中写入clear:both;

4.IE浮动margin产生的双倍距离

  1. #box{  
  2. float:left;  
  3. width:100px;  
  4. margin:000100px;//这种情况之下IE会产生200px的距离  
  5. display:inline;//使浮动忽略  
  6. }  
  7.  

5.padding问题

Firefox设置padding后,div会增加height和width,但IE不会(*标准的XHTML1.0定义dtd好像一致了)
高度控制恰当,或尝试使用height:100%;
宽度减少使用padding
但根据实际经验,一般Firefox和IE的padding不会有太大区别,div的实际宽=width+padding,所以div写全width和padding,width用实际想要的宽减去padding定义

6.div嵌套时y轴上padding和marign的问题

Firefox里y轴上子div到父div的距离为父padding+子marign
IE里y轴上子div到父div的距离为父padding和子marign里大的一个
Firefox里y轴上父padding=0且border=0时,子div到父div的距离为0,子marign作用到父div外面

7.padding,marign,height,width的傻瓜式解决技巧

注意是技巧,不是方法:
写好标准头

  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4.  

高尽量用padding,慎用margin,height尽量补上100%,父级height有定值子级height不用100%,子级全为浮动时底部补个空clear:both的div
宽尽量用margin,慎用padding,width算准实际要的减去padding。

列表类

1.ul标签在Firefox中默认是有padding值的,而在IE中只有margin有值
先定义ul{margin:0;padding:0;}

2.ul和ol列表缩进问题
消除ul、ol等列表的缩进时,样式应写成:{list-style:none;margin:0px;padding:0px;}

显示类

1.display:block,inline两个元素

  1. display:block;//可以为内嵌元素模拟为块元素  
  2. display:inline;//实现同一行排列的的效果  
  3. display:table;//forFirefox,模拟table的效果  
  4.  

◆display:block块元素,元素的特点是:

总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度
<div>,<p>,<h1>,<form>,<ul>和<li>是块元素的例子

◆isplay:inline就是将元素显示为行内元素,元素的特点是:

和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
<span>,<a>,<label>,<input>,<img>,<strong>和<em>是inline元素的例子

2.鼠标手指状显示

全部用标准的写法cursor:pointer;

背景、图片类

1.background显示问题

全部注意补齐width,height属性

2.背景透明问题

IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE:filter:alpha(opacity=10);
Firefox:opacity:0.6;
Firefox:-moz-opacity:0.10;
***两个都写,并将opacity属性放在下面

版权声明:本文来源51CTO,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:http://developer.51cto.com/art/201008/220829.htm
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2021-05-16 12:20:13
  • 阅读 ( 769 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢