首页 > 代码库 > 你不知的IE的bug及其解决方案
你不知的IE的bug及其解决方案
E令人咬牙切齿的bug不胜枚举,其中IE6更是臭名昭著,令人发指。这里总结出IE下最为严重的5个bug,及其应对方案。
1、IE6下无法显示png格式的透明信息
这个bug是众多网页设计师的噩梦,虽然可以采用gif代替,但是gif的表现力实在有限,单是阴影就无法完美显示了,这无疑给网页的表现力下了一个档次。
解决方案:
- img {
- filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
- }
主要利用IE滤镜来解决png无法透明的问题。
接下来来看第二种解决方案:js
点此下载
上面是jquery用于解决这个bug的插件,强烈推荐!
2、IE6下遮罩层无法覆盖选择框
解决这个bug请看我之前写的一篇博文:http://www.36ria.cn/?p=395
3、IE6下双倍外边距问题
又是一个令人发指的bug,IE6下设置margin-left或margin-right,居然会自动加倍。
解决方案:
- div#content {
- float:left;
- width:200px;
- margin-left:10px;
- /* fix the double margin error */
- display:inline;
- }
原理:关键是 display:inline; ,将其转换为内联元素。
4、:hover 只支持a,无法应用于其他元素
众所周知,在网页里面鼠标移动切换样式,是个应用非常广泛的功能,可是IE6下只支持链接,其他元素都无法使用:hover。
解决方案:JS
- /* jQuery Script */
- $(‘#list li‘).hover(
- function () {
- $(this).addClass(‘color‘);
- },
- function() {
- $(this).removeClass(‘color‘);
- }
- );
- /* CSS Style */
- .color {
- ">#f00;
- }
- <ul id="list">
- <li>Item 1</li>
- <li>Item 2</li>
- <li>Item 3</li>
- </ul>
原理:利用jquery的特殊的hover事件
5、IE下不显示默认的垂直滚动条
解决方案如下:
- html {
- overflow: auto;
- }
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。