我们在制作网站时,要求做好的网站在不同的浏览器下显示都是一样的效果,对于像火狐,谷歌浏览器这样的标准浏览器,网站一般很少出现错位的现象。但在低版本IE浏览器下,却会出现很多意想不到的问题和错位。(我们在自己建网站过程中,可以使用网站浏览器兼容测试软件–IETester测试网站兼容性。)
下面是学做网站论坛总结的低版本IE浏览器网站不兼容的问题及解决方法,供广大学员在做网站时,检查网站错位时的问题所在。
1.??li在IE中底部3像素的BUG?
解决方案:在
上加float:left;即可解决
2.??IE6中奇数宽高的BUG。
解决方案:就是将外部相对定位的div宽度改成偶数。高度也是一样的。
3.??IE6文字溢出BUG? ?
引发这种BUG有几个条件
1.是注释引起的,删除所有注释即可.
2.hidden的input直接放在form下.
3.display为none的div也有可能引发此bug.
4.可以通过外面再包一次DIV解决
由注释造成文字溢出,属于IE6的BUG,溢出文字的字数=注释的条数*2-1,这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。
解决办法:
1、不放置注释。最简单、最快捷的解决方法;
2、注释不要放置于2个浮动的区块之间;
3、将文字区块包含在新的
↓这就是多出来的那只猪 ;
4、去除文字区块的固定宽度,与3有相似之处;
5、在后面加一个
或者空格;(不推荐)
6、使用IE注释格式,如:Put your commentary in here…
7、给盒子加position:relative;属性
4. 样式中文注释后引发失效。
满足下面条件就会引起 注释下面的样式不起作用:
1. css有中文注释
2. css为ANSI编码
3. html为utf-8编码
解决方法:
1. 去掉中文注释,用英文注释
2. 统一css 和 html 的编码
建议采用第二种解决方法
ps: css为uft-8??html 为ANSI 不会出现失效的情况。
5. li在IE中底部空行的BUG。
IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下,列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。
解决方法:
1. 在li a 样式中加入zoom:1;
2. 在li 样式中加入display:inline ;
3. 将
标签写成一行;
4. 在li a 样式中加入width:100%或者一个宽度值;
建议采用第4二种解决方法
7. 父级使用padding后子元素绝对定位的BUG。
在父层使用position:relative;和padding(当然0值除外)后,ie6中层的定位起始坐标是从padding后的位置算起,而其他则从层的真实位置算起,而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。
解决方法:
给外层加宽度或zoom:1
8. display:none引起的3像素的BUG
解决方案1:
将最后一个div加一个margin-right:-3px。
如:
如果觉得《html锚点链接IE不兼容 网站出现IE浏览器不兼容的解决方法汇总》对你有帮助,请点赞、收藏,并留下你的观点哦!