兼容性问题

一 css盒模型在IE6下解析有问题,我们知道就width来说,一个块级元素的magin、padding、boder,width7个属性的宽度之和,应该等于其父级元素的内容区域(width),而我们一般设置宽度若是未达到其长度,浏览器就会重置margin-right的值,将之它们的和等于其值,当然若是我们为margin设置负值,那么元素的width可能超出其父元素。在标准下,width为padding所占区域,但是再ie6中设置width后,其真实width为所设width-其padding与border*2,我一般采用CSShack技术处理

二、 IE6的双倍边距BUG,在块级元素浮动后本来外边距10px,但IE解释为20px,解决办法是加上display: inline ,

1、问题:在IE6下如果某个标签使用了float属性,同时设置了其外补丁“margin:10px 0 0 10px”可以看出,上边距和左边距同样为10px,但第一个对象距左边有20px。

2、解决办法:当将其display属性设置为inline时问题就都解决了。

三、说明:这是因为块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距 就会出现这种情况。
也许你会问:“为什么第二个对象和第一个对象之间就不存在双倍边距的BUG”?

因为浮动都有其相对应的对象,只有相对于其父对象的浮动 对象才会出现这样的问题。第一个对象是相对父对象的,而第二个对象是相对第一个对象的,所以第二个对象在设置后不会出现问题。另外在一些特殊布局中,可能需要组合使用display:block;和display:inline;才能达到预期效果。

当然最坏的情况下,我们就可以使用”margin:10px 0 0 10px;*margin:10px 0 0 10px;_margin:10px 0 0 5px”,这种“标准属性;*IE7识别属性;_IE6识别属性”HACK方式解决

3、总结:这个现象仅当块级对象设置了浮动属性后才会出现,内联对象(行级对象)不会出现此问题。并且只有设置左边距和右边距的值才会出问题,上下边距不会出现问题。

<div style=”width:200px;height:50px;background:#ccc;”>

<div style=”width:100px; height:50px;float:left;margin-left:10px; background:#eee;”>

</div>

</div>

margin双布局可以说是IE6下经典的bug之一。产生的条件是:block元素+浮动+margin。

越少的浮动,就会越少的代码,会有更灵活的页面,会有扩展性更强的页面。浮动会用的较少。另外,也会避免使用浮动+margin的用法。所以,越后来越不易遇到这种bug。

使用display:inline;可以解决这个问题。

而为什么display:inline可以解决这个双边距bug,首先是inline元素或inline-block元素是不存在双边距问题的。然后,float:left等浮动属性可以让inline元素haslayout,会让inline元素表现得跟inline-block元素的特性一样, 支持高宽,垂直margin和padding等,所以div class的所有样式可以用在这个display inline的元素上。

三、 IE6下图片下方有空隙产生;解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block,
或者设置vertical-align 属性为vertical-align:top bottom middle text-bottom都可以解决.(但是最近我发现这个问题在其它浏览器中也有所体现)

四、 IE6 3px bug 两个浮动层中间有间隙,这个IE的3PX BUG也是经常出现的,
解决的办法是给右边元素也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
经典两列布局,float: left;width:200px; 第二个,margin-left,200px; 他们之间会产生3px的间距。

五、 在IE6中没有min-width的概念,其默认width就是min-width,所以有时字体过多它会选择撑开容器。

六、 IE6无法定义1px左右高度的容器,是因为默认的行高造成的,解决的方法也有很多, 例如: overflow:hidden zoom:0.08 line-height:1px

七 使用margin : 0 auto;方法使容器居中依然在IE6中行不通,我们要对其父容器使用

七 被点击访问过的超链接样式不在具有hover和active了, 解决方法是改变CSS属性的排列顺序: L-V-H-A <style type=”text/css”> a:link {} a:visited {} a:hover {} a:active {} /style>

八 在使用绝对定位/相对定位时,设置z-index在ie中可能会失效,是因为其元素依赖于其父元素的z-index,而父元素默认为0 ?所以子元素z-index高,而父元素底,依然不会改变其显示顺序;

posted on 2015-07-26 23:56  曾杰  阅读(160)  评论(0编辑  收藏  举报

导航