IE6的兼容问题

随着微软windows系统系列的推出,当初的windows xp系统渐渐淡出操作系统的舞台,被新的有活力的操作系统所代替。虽然它渐渐推出了我们的视线,但是在某些地方我们还是能看到他们的,仍然在使用, 所以对于做前端开发的人员一定要考虑到我们制作儿的网页与windows xp操作系统的兼容问题——就是与IE6的兼容问题。

现在的浏览器种类繁多,可以说我们前端开发的东西在很多浏览器上都能使用,一般没有多大的问题。可是IE6就是那么个性,它的兼容性问题一直让很多前期的前端开发人员头疼。偶们来看看IE6都有哪些方面的特殊:

(一):选择器的兼容问题

1.对于一般的选择器如id选择器、类选择器、标签选择器,IE6和其他浏览器一样都兼容;

2.子代选择器(E>F),序选择器(E:first-child、E:last-child)、兄弟选择器(E+p)这些选择器IE6都不兼容{主要是css2中的选择器,css3中的先不谈}

(二):双倍margin问题

1.何为双倍的margin?

解释:就是说当我们连续浮动元素时,如果浮动元素的浮动方向和我们设置的margin方向相同时,浮动元素的第一个元素就会具有双倍的margin值。

例:ul li{float:left;

margin-left:20px;}

此时我们的浮动元素和margin的方向相同,那么在第一个li中,它与边框的距离就是40px。

解决办法:1.可以通过改变条件的方法来阻止这个bug发生。

就是说把float方向与margin的方向不一致时,那么这个bug也就不存在了,所以在编写代码时要注意到这一点;

2.可以通过单独设定浮动元素的首项来解决已经出现的bug

我们另外给浮动元素的首项一个margin属性,是他的值是我们前面margin值得1/2,这样也就解决了。

(三) 3px 问题

1.何为3px:

解释:当我们元素有有浮动时,浮动元素的子代使用margin-right来调节自己的位置时,会出现距离边框的距离比我们设定值多出3px的现象。

例:div{float:right;}

div.class{margin-right:10px;}/*div的儿子*/

这样写就会出现,儿子距离父亲的距离是13px,而不是10px;

解决办法:当我们给子元素margin属性时,相当于我们用儿子在踢打父亲,这是不规范的。我们可以通过在父元素中使用padding来解决。

(四)盒子的兼容性

IE6不支持宽高小于12px的盒子,任何小于12px的盒子,在IE6中都显得很大。

解决办法:{height:4px;

_font-size:0px;}

在属性前面加上下划线之后,此属性就变为了IE6的专属属性,它就能识别了。这是一种“hack”,就是黑客技术。原理就是用文字的高度来撑高盒子的高度,使盒子变大。

(五)overflow:hidden;

我们都知道overflow:hidden;是用来清除浮动的影响的。其原理就是给自己本身增加高度,来束缚浮动的元素不影响下个浮动元素。但是在IE6中这个就不好用了。

解决办法:{overflow:hidden:

_zoom:1;}

就是在我们添加overflow:hidden;属性时配合_zoom:1;使用就可起到清除浮动影响的作用了。

因为没有安装IE6,所以不能一一举例说明,请见谅。以上就是我对IE6兼容问题的一些看法和总结,希望对你的编程有所帮助。。。。。

时间: 2024-10-12 20:39:24

IE6的兼容问题的相关文章

IE6部分兼容问题

border-style:dotted 点线 IE6不兼容 (除了solid以外,其它都有兼容问题,不完全一样) a IE6 不支持a以外的所有标签伪类,IE6以上版本支持所有标签的hover伪类. inline-block IE6 7不支持块元素标签的inline-block 空标签清浮动 IE6 最小高度 19px:就是font-size=0后,IE6下还有2px偏差.通过设置overflow:hidden来隐藏设置高度以外的高度. after伪类 IE 6 7不支持after伪类清除浮动,

z-index属性在IE7和IE6的兼容问题

z-index属性在IE7和IE6的兼容问题:采用定位的元素有可能就会用到z-index属性,不过具有一定的浏览器兼容问题,不用问基本属于IE低版本浏览器的问题,因为它的前科实在太多了,虽然现在用低版本浏览器的用户越来越少,相信不出几年就会消失,但是毕竟现在还是存在的,下面就介绍一下如何解决z-index属性在IE7和IE6浏览器的兼容问题.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf

JQuery与IE6的兼容问题之&lt;Select&gt;

原文地址:http://hi.baidu.com/fengbaobao/item/403cf90be03ba131a2332ac2 在IE7,FF下页面经常会用如下语句对一个Select列表选择其中的值,但是该JQuery语句IE6不支持, $("#CarTrimSeries").get(0).value = '<%=seriesId %>'; $("#CarTrimSeries").attr("value",'<%=serie

IE6支持兼容min-width、max-width CSS样式属性

IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定一定宽度范围值,有时需要设置一个最小宽度,接下来由DIVCSS5为大家总结的解决IE6不支持min-width和不支持max-width的方法.以下为CSS 宽度之IE6支持最小宽度.最大宽度解决技巧(你可能需要进一步详细了解CSS width知识). 目录 IE6支持max-width解决方法 I

解决ie6不兼容透明图片

解决ie6不兼容透明图片有好多方法. 如果想同时解决兼容png8和png24的图片,建议同时引入pngfix.js和dd_belatedPng.js文件,如下: <!--[if IE 6]><script src="../js/pngfix.min.js"><script type="text/javascript" src="http:../js/DD_belatedPNG.js"></script&g

IE6/7兼容伪类、IE9以下兼容颜色渐变、IE8以下兼容nth:child(n)

1.IE6/7兼容伪类 _1.CSS部分:一个有冒号,一个是空格分隔.前者IE8+及其他现代浏览器:后者为IE6-7准备的 #test:before, #test before{ content: attr(data-content); width: 0; height: 0; } _2.HTML部分 <div id="test"  data-content=""></div> 设置content _3.JS部分 设置IE6/7 var $b

min-height最小高度的实现(兼容IE6、IE7、FF)(解决IE6不兼容min-height)

<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Author" content="胡超"> <title>super胡</title> <style> div{ background:#ccc; min-height:100px; /*高度最小值设置为:100px IE6不

IE6 的兼容相关问题

因为在实习公司要求兼容IE6+,所以将IE6相关的样式兼容问题列出,及解决方案. 1.让页面变丑的透明背景图片问题: HTML都为以下代码: <div class="img-png"></div> 一般情况下使用png格式图片作为背景图片CSS部分: 1.img-png{ 2 width:64px; 3 height:64px; 4 background: url("imgsss/day.png") no-repeat; 5} 效果图: ch

IE6下兼容问题(转载)

()1.终极方法:条件注释 <!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本. <![endif]--> <!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本. <![endif]--> <!--[if gt IE 6]> 这段文字仅显示在 IE6以上版本(不包含IE6). <![endif]--> <!--[if IE 5.5]> 这段文字仅显示在 IE5.5. &