本来想写一篇关于 IE bugs 的总结的,但是发现 IE 的 bugs 一般都存在IE5,IE6,IE7上,这都是很古老的浏览器。而且这些 bugs 测试起来相当麻烦,IEtester和 IE10 自带的文档模式选择都有一些偏差,要在虚拟机上安装系统测试才是最为准确的,最最重要 ...
本来想写一篇关于 IE bugs 的总结的,但是发现 IE 的 bugs 一般都存在IE5,IE6,IE7上,这都是很古老的浏览器。而且这些 bugs 测试起来相当麻烦,IEtester和 IE10 自带的文档模式选择都有一些偏差,要在虚拟机上安装系统测试才是最为准确的,最最重要的原因是现在的网页开发 IE5 基本是不考虑了,IE6,IE7 也快完全退出历史舞台了,一般网站会通过检测浏览器版本并提示用户升级浏览器,所以这些 bugs 在现在的开发中遇到的几率是很低的。
而之所以要总结是因为偶尔在学习过程中,一些博客或书中会涉及到这些 bugs,甚至在一些公司的笔试中喜欢挑出这些来考考你对 CSS 的了解是否够深入。所以我还是本着前人栽树后人乘凉的原则去网上找一些好的资源学习好了。寻寻觅觅终于在W3C Plus上找到站长大漠的浏览器兼容之旅,总共四篇,总结得比较系统,可读性比较强,就以此为主要的资源学习吧。链接如下: CSS:IE6,IE7 表现如下:正常表现应该如下:
则表现正常。
-------------------------------------------------------吃完栗子-------------------------------------------------------IE6,IE7 表现如下:
解决方法:
IE6,IE7 表现如下:
IE6 中的表现如下:IE7 表现正常:
-------------------------------------------------------吃完栗子-------------------------------------------------------CSS:
1 .wrap { 2 margin: 100px; 3 position: relative; 4 border: 1px solid #aaa; 5 } 6 .box { 7 position: absolute; 8 left: 100px; 9 top: 100px;10 width: 100px;11 height: 100px;12 background: #ccc;13 }
IE6 表现如下:正常表现如下:
但其实这种 hack 并不推荐,IE6 的表现并不和标准浏览器一致,行内元素表现出了块级元素的特点,上下的 margin 值变得有效了:
-------------------------------------------------------吃完栗子-------------------------------------------------------CSS: 1 a{ 2 text-decoration: none; 3 } 4 a img{ 5 display: none; 6 border:none; 7 } 8 a:hover img{ 9 display: inline;10 }
标准浏览器下,当鼠标在链接上时,图片会显现,但是IE6没有效果:原因是 a:hover 不具有 hasLayout 特性,故解决的方法也很容易,即激活 a:hover 的 hasLayout 属性:-------------------------------------------------------吃完栗子-------------------------------------------------------CSS(其中跟/**/的表示触发这个 bugs 的必要属性):IE6表现如下:CSS:IE6表现如下:解决方法:
原标题:IE6~IE7 bugs
关键词:ie
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。