IE6双倍内外边距解决方案

青春..荒唐

浏览: 945156 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS，浏览器兼容

CSS 浏览器兼容

IE6下双倍内外边距Bug的处理办法

【注意】

双倍内边距表现为宽高都*2，而双倍外边距则表现为宽*2，即水平外边距*2

（1）先来讲下双倍内边距padding

ie6的padding属性hack，padding属性在ie6下的hack!

【问题】在ie6下使用padding的话,数值乘2倍增长

【方案】只能用!important来调整!

例如x容器样式是这样

.x{width:100px;height:100px;padding:50px;}

问题具体表现为：在IE7\8，firefox，chrome等主流浏览器中，它的总占据的宽度和高度是200X200，而在IE6中，则是300X300

要调整兼容性，利用!important关键字！

样式写成

.x{width:100px;height:100px;padding:50px !important;padding:25px;}

除了IE6以外，其他浏览器都支持!important关键字属性的优先！

【注意】

要使用!important的话，把优先的属性写前面，就像上面一样！这样在代码读取顺序的时候，除IE6以外的浏览器读取到了!important关键字的属性，后面的相同属性就不再读取，而IE6不支持!important，所以IE6只能读取!important后的属性！

另外：在ie6下浮动了的容器里使用margin-left或right，数值也是乘2倍增长。下面我们就来说下双倍外边距的BUG

（2）水平双倍外边距margin

先来看下问题

<!DOCTYPE html>  
<html>  
    <head>  
    <meta charset="utf-8">  
    <title>IE6下的双倍Bug解决方法</title>  
 <style type="text/css">  
.div1{  
    height: 200px;  
    width: 200px;  
    border: 1px solid red;  
    float: left;    
    margin: 30px;  
}  
 </style>  
</head>  
<body>  
<div class="div1">浮动DIV</div>  
</body>  
</html>

代码运行显示效果：

加上display：inline；后表现为

【问题】

说实话，这个原因还真是不清楚。但是这样的结果确确实实在IE6中出现了。

而且这种情况出现的条件是当浮动元素的浮动方向和浮动边界的方向一致时才会出现。如同上面的例子一样，元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理，元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素，第一个浮动元素会出现这个双边距bug，其它的浮动元素则不会

【解决方案】

只需要给浮动元素加上display:inline;这样的CSS属性就可以了

这个现象仅当块框设置了浮动才会出现，行内框浮动不会出现此问题。因为行内框默认display:inline，给其float后自动就具有块框特性，所以如果是span之类的行内框，浮动后是不需要再单独设置display:inline就可以自动消除双倍水平外边距

【IE6双倍边距Bug触发条件】

①：是块元素；

②：有左/右浮动；

③：有左/右外边距

详细总结条件就是：

1、没有设置display:inline的块元素

2、浮动元素

3、设置了水平外边距（浮动的方向和水平外边距设置的方向一致）

4、元素与父容器之间

【总结】

①只有设置水平外边距的值才会出现双倍外边距，垂直外边距没有关系；

②如果默认的是块元素例如div之类的，在设置 float 后同时要置display:inline来解决IE6的双倍水平外边距；

如果默认是内联元素例如span之类的，那么浮动后是没有关系的，因其自身居右display:inline，所以不需要再重复添加该属性

分享到：

hasLayout详解及触发条件 | zoom和scale的区别

2018-02-03 17:18
浏览 671
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论