DDR爱好者之家

IE6 bug修正的10个小技巧 推荐
站长资源 2024/12/29 佚名
36 1538
DDR爱好者之家 Design By 杰米

1. 使用DOCTYPE
你应该在一直每个HTML文件的头部都使用DOCTYPE，并且我们推荐使用strict 版本，比如：

复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或者，对于XHTML使用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

你需要处理的最棘手的事情就是IE6进入quirks模式——它已经够诡异了。

2. 设置position: relative
将一个元素设置为”position:relative”可以解决很多问题，特别是你曾经遇到隐藏的或对齐诡异的盒子。显然，你需要非常小心点儿，因为绝对定位的子节点可能会因此重新定位。

3. 将浮动元素设置为display:inline
具有margin属性的浮动元素可能引起著名的IE6双倍margin问题，比如，你为一个元素指定margin-left为5px，但是IE6中实际上却表现为10px。”display:inline”将解决这个问题，尽管这不是必须的，你的CSS仍然是有效的。

4. 将一个元素设置为hasLayout
很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 这是一个IE内部属性（IE隐藏的，更多关于haslayout的资料，可以参阅这里），用来确定相对于其他元素，内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素，或者是应用透明效果，设置hasLayout也可能是必须的。

最简单的设置hasLayout的方法是为CSS设置一个高度或宽度（zoom也可以用，但是zoom并不是CSS标准的一部分）。我们推荐设置实际尺寸，但是问题是这是不现实的，你可能需要使用”height:1%”。如果父元素并没有设置高度，该元素的实际高度并不受影响，而且这个时候hasLayout已经被启用。

5. 修正重复文字bug
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：

确保所有的元素使用”display:inline;”
在最后一个元素上使用一个”margin-right:-3px;”
为浮动元素的最后一个条目使用一个条件注释，比如：

复制代码代码如下:
<!--[if !IE]>Put your commentary in here...<![endif]-->

在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)
访问 positioniseverything.net 查看该问题的完整介绍。

6. 在可点击和悬停的元素上只使用<a>标签
IE6只认识对a标签的CSS hover效果。

你也可以在基于JavaScript的组件内使用他们来控制，以使他们保持键盘的可操作性。是有一些可替代的选择，但是<a>标签比其它方案更可靠。

7. 使用!important 或高级选择器来区分IE6
不使用传统Hack或在额外文件中的条件CSS的方法，写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义：

复制代码代码如下:
#element {
min-height: 20em;
height: auto !important; /* 所有浏览器都理解这段代码 */
height: 20em; /* IE6 错误的使用这个值 /*
}

IE6 不理解min-height并错误的用20em覆盖”auto”高度，但是，如果内容需要更多的空间的话，它会自动增加高度。

另外一个可选的方法是使用高级选择器，比如e.g.

复制代码代码如下:
#element {
min-height: 20em;
height: 20em;
}
/* IE6 无视下面的代码*/
#element[id] {
height: auto;
}

8. 避免百分比单位
百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小，才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比，比如：

复制代码代码如下:
body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}

9. 尽早测试并不断测试
不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕，而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行，那么一般在其它浏览器就不会有问题。

10. 重构你的代码
经常发生的事情是，修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码，但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。

神飞感言，虽然IE8并没有从根本上改变IE，但是它对CSS标准的支持的确有非常大的改观。但是即便如此，我们依然不能寄希望与IE8的普及，这是一件很不靠谱的事情，顽固的IE6用户未必会接受IE8。所以我们最近一年半载还是不能无视IE6。

如果你有其它比较好的可以解决IE6的bug的好方法或技巧，别忘了告诉前端观察哦～

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米