再谈CSS浏览器兼容问题
通过网站统计，发现在访问我的网站使用的浏览器比例中，IE6一直都是最高，超过1/3。不知道为什么国内的朋友还是这么钟爱这个在网站开发界臭名远扬的浏览器。有人告诉我，之所以大家还用IE6，是因为装的盗版操作系统自带了IE6，由于是盗版不敢升级到IE7。如果真是这样，那么大家还可以装Firefox啊？真希望，不久的将来人们放弃使用这个国内人称之为“废品”，国外人称之为“Buggy”（n多毛病的意思）的浏览器。
废品归废品，既然用的人那么多，我们做网站开发的也就不得不保证网页可以在IE6上可以正常显示。我在IE6下的CSS问题这篇文章里介绍了一些解决IE6CSS的方法。前几天在网上看到一篇有关CSS浏览器兼容问题的文章，觉得写的挺好的，于是就把和IE6有关的找出，结合上自己的经验整理如下：
1. 外边距在IE6下加倍
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如：
#floatDiv{ float:left; margin:5px; }/*IE下理解为10px*/#floatDiv{ float:left; margin:5px; display:inline;}/*IE下再理解为5px*/
2. IE6下图片下有空隙产生
解决这个BUG的方法也有很多,可以是设置img为display:block或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom都可以解决.
3. IE6无法定义1px左右高度的容器
这个问题是因为默认的行高造成的,解决的方法也有很多,例如:
- overflow:hidden
- zoom:0.08
- line-height:1px
4.IE下的Div居中问题
在IE下，把div设置的样式设置为:margin: 0 atuo还是无法把DIV居中。解决方法：
- 1. 需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。
- 2. 用XHTML，并且在HTML第一行加上DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5.UL的padding与margin
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
6. FORM标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,一般的做法是在css中首先都使用这样的样式ul,form{margin:0;padding:0;}
7.DIV浮动,文本产生3象素的bug
在IE下，左边对象浮动，右边对象内的文本会离左边有3px的间距。 解决办法：左边的DIV采用外补丁的右边距来定位：
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px;}/*关键*/<div id="box"><div id="left"></div><div id="right"></div></div>
标签： CSS
0 条评论:
发表评论
指向此帖子的链接: