Css在IE6浏览器里的一些弊端和解决方法
2012-08-07 18:53
232 查看
此文出自:K.N.J的博客
有很多时候,如果使用的浏览器的版本不够,会导致一些CSS属性无法发挥出应有的作用,结合自己碰到和网上的一些情况,做了一些对会在IE6及更早浏览器里出现的问题的归类及解决方法。
1.浮动时产生双倍边距。
如果再IE6及更早的浏览器中出现浮动后margin的值表现出双倍的情况,可以将此元素的display设置为inline就可以了。
如:#text{display:inline}
2.定义小高度的容器
有时在IE6及更早浏览器中无法直接定义较小高度的容器,那是因为都有默认的行高。这个时候要用到overflow这个属性,并设置为hidden才可以。
如:#text{overflow:hidden;height:1px;font-size:0;line-height:0;}
3.模拟min-height效果
这个时候,我们不能再将#text中的overflow设置为hidden了,否则min-height就没有任何作用了。
正确的方法是:#text{min-height:120px;_height:120px;}
4.解决当li中出现2个或以上的浮动,li之间会产生空白间隙的问题
如何消除IE6或更早浏览器中li之间的间隙,可以使用top这个属性值,也可以设置为text-top|middle|bottom|text-bottom,甚至还可以设置<length><percentage>的值。
其中之一的例子是:li{vertical-align:top}
5.解决使用滤镜PNG图片透明后,容器内链接失效的问题。
要解决这个问题,就必须要问容器内的链接定义相对定位属性position的值为relative。
实例为:div{width:200px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’*.png’);}
a{_position:relative}
............
...............
...................更多IE6中的bug及修补方法,请点击:K.N.J's blog
更多关于html方面的资料,请参阅:K.N.J的博客
有很多时候,如果使用的浏览器的版本不够,会导致一些CSS属性无法发挥出应有的作用,结合自己碰到和网上的一些情况,做了一些对会在IE6及更早浏览器里出现的问题的归类及解决方法。
1.浮动时产生双倍边距。
如果再IE6及更早的浏览器中出现浮动后margin的值表现出双倍的情况,可以将此元素的display设置为inline就可以了。
如:#text{display:inline}
2.定义小高度的容器
有时在IE6及更早浏览器中无法直接定义较小高度的容器,那是因为都有默认的行高。这个时候要用到overflow这个属性,并设置为hidden才可以。
如:#text{overflow:hidden;height:1px;font-size:0;line-height:0;}
3.模拟min-height效果
这个时候,我们不能再将#text中的overflow设置为hidden了,否则min-height就没有任何作用了。
正确的方法是:#text{min-height:120px;_height:120px;}
4.解决当li中出现2个或以上的浮动,li之间会产生空白间隙的问题
如何消除IE6或更早浏览器中li之间的间隙,可以使用top这个属性值,也可以设置为text-top|middle|bottom|text-bottom,甚至还可以设置<length><percentage>的值。
其中之一的例子是:li{vertical-align:top}
5.解决使用滤镜PNG图片透明后,容器内链接失效的问题。
要解决这个问题,就必须要问容器内的链接定义相对定位属性position的值为relative。
实例为:div{width:200px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’*.png’);}
a{_position:relative}
............
...............
...................更多IE6中的bug及修补方法,请点击:K.N.J's blog
更多关于html方面的资料,请参阅:K.N.J的博客
相关文章推荐
- css javascript等兼容IE6,IE7,IE8,IE9,FIREFOX,Chrome等浏览器详细解决方法
- IE6浏览器中window.location.href无效的解决方法
- CSS兼容的一些解决方法
- div+css浏览器兼容问题解决方法
- IE6浏览器下resize事件被执行了多次解决方法
- 关于一些css属性在微信上不兼容的解决方法
- IE6,IE7,FireFox,Opera,Safari兼容CSS的解决方法及CSS差别
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- css 半透明 让IE6支持png图片半透明解决方法
- IE6下CSS图片缓存问题解决方法
- 浏览器兼容:Web标准化建站(DIV+CSS)必看的常见问题解决方法
- 【转贴】div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法
- 【技术】ie6,ie7,ie8 css bug汇总以及兼容解决方法
- div+css浏览器兼容问题解决方法
- div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法
- js,css三种方法解决IE6下position:fixed的Bug以及闪动问题
- 关于CSS+DIV 开发 与各浏览器的兼容性问题..解决方法.
- Css浏览器兼容的解决方法
- IE6,IE7,FireFox兼容CSS的解决方法及CSS差别
- Css margin 对各浏览器支持的解决方法