`
hl756799782
  • 浏览: 77036 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

IE6/7下设置padding-bottom时出现的Bug(转)

CSS 
阅读更多

原文链接:http://bbs.itzcn.com/thread-17546-1-1.html

 

在使用DIV+CSS设计网页时,经常需要层嵌套层情况。我使用padding-bottom属性和padding-top属性为外层DIV设置间距,具体代码如下所示:

 

<html>   
<head>   
    <meta charset="utf-8">   
     <title>IE6/7 double padding-bottom Bug</title> 
<style>
#div1{
border:1px solid red;
width:300px;
padding-bottom:15px;
padding-top:15px; 
padding:0; 
}
</style>
</head>
<body>
<div id="div1 ">  
     <div style="float:left;border:1px solid gray;">  
         IE6/7 double padding-bottom Bug   
     </div>  
     <div style="clear:both;"></div>  
</div>  
</body>  
</html>

 我在外层div分别为对象的上间隙和下间隙加了15px,该段代码在IE8以及其他一些主流浏览器下运行正常,可在IE6/7以及IE8/9(怪异模式)下,div的下间隙却翻倍了,如图所示。请问应该如何解决

 

Snap5.jpg

------------------------------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------------------------

这个Bug是由于清除浮动的DIV给撑大的。在IE6/7默认情况下,div都有一个默认的高度,所以为该div设置如下代码就会解决问题:

 

overflow:hidden; height:0; 

 

其实,清除浮动的方法这并不是最好的方法,因为它产生了冗余标签。我觉得让其父级元素来清除浮动更合适,给其父元素添加:

{overflow:auto; zoom:1;}//IE
#div:after {display:block; visibility:hidden;clear:both;height:0; content:"/20";}

after伪元素在IE下无效果,所以不影响IE的兼容代码。或许这也不是最优的方法,但现在这是网上流传的比较多。

分享到:
评论

相关推荐

    IE6/IE7中li底部4px空隙的Bug

    问题的关键在于,当`&lt;div&gt;`被浮动时,如果`&lt;li&gt;`设置了如`width`、`height`、`zoom`、`padding-top`、`padding-bottom`、`margin-top`或`margin-bottom`等CSS属性,IE6/IE7就会出现这个4像素的空隙。 为了解决这个...

    CSS种针对浏览器兼容问题的解决方法

    - `*`:仅在IE6和IE7中生效。 - `_`:仅在IE6中有效。 - `*+`:仅在IE7中有效。 以下是一些具体的示例代码: ```css /* IE6 & Firefox */ background: orange; *background: blue; /* IE6 & IE7 */ background: ...

    div+CSS 兼容小摘

    上述代码段使用了IE特有的条件注释,可以针对性地加载不同的CSS文件来解决IE7和IE6及其以下版本的兼容性问题。 #### 三、浏览器对实际像素的解释差异 - **IE/Opera**:对象的实际宽度 = (margin-left) + width + ...

    IE浏览器下的图片空隙间距BUG和解决办法.pdf

    这个问题主要出现在IE浏览器的旧版本中,特别是IE6和IE7,而在现代浏览器如Firefox、Chrome、Safari等中则很少遇到。这个BUG表现为在设置好图片的margin和padding为0的情况下,图片之间仍然会出现不必要的间距。 ...

    IE6兼容性问题及IE6常见bug详细汇总

    2. **边距加倍问题**:当块元素设置左右浮动并有`margin`时,IE6会出现“margin双倍”现象。通过将元素的`display`属性设置为`inline`,可以消除这一问题。 3. **奇数字体大小和边框高度**:在IE6中,如果字体大小...

    CSS常见Bug及其修正方法

    - **问题描述**:在IE浏览器中,当同时设置元素的`width`、`padding`和`border`时,它们会叠加在一起计算总宽度,而不是像其他浏览器那样分别计算。 - **修正方法**:可以使用内部嵌套的div来解决这个问题,只在外部...

    IE6常见bug附解决方法

    当在IE6中对一个块级元素应用`float`属性,并且设置了左右`margin`时,可能会出现实际`margin`比预期大的现象,这种现象通常被称为“双边距”或“双倍`margin`”。 **解决方法**: 通过设置`display`属性为`inline`...

    css+div 在IE中兼容

    Internet Explorer(以下简称IE)浏览器由于其版本迭代过程中对CSS支持的不一致性,导致在开发基于CSS布局的网站时,需要特别注意跨浏览器兼容性,尤其是针对早期的IE版本(如IE6、IE7)。本文将深入分析如何通过...

    div+CSS框架样式

    /*---------for IE5.x bug*/ html &gt; body td {font-size: 11px;} ``` - `html &gt; body td`: 特定选择器表示直接子元素`td`。 - 为了修复Internet Explorer 5.x中的字体大小显示问题,将字体大小固定为11px。 #...

    div表格垂直居中.pdf

    **多行内容垂直居中**\n - 对于高度可变的容器,可以通过设置相同的`padding-top`和`padding-bottom`来实现垂直居中。这种方法同样支持块级和内联元素,但要求容器高度不可固定。\n CSS代码示例:\n ```css\n ....

    JavaScript Table行定位效果

    首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; ...

    浏览器兼容性汇总

    IE6下图片下有空隙产生 - **IE6**: 图片下方可能会出现空白。 - **Firefox等其他浏览器**: 通常表现一致。 **解决方案**: 使用 `display:block` 或为图片添加 `vertical-align:top` 来消除空白。 ##### 18. 对齐...

    CSS网页布局参考.docx编程资料

    - **问题描述**:IE浏览器在处理带有`margin`和`padding`的`float`元素时存在bug。 - **解决方法**: - 可以通过在`float`元素内部嵌套一个`div`来设置`margin`和`padding`。 - 或者使用hack方法为IE指定特别的值...

    浏览器兼容性问题

    - **问题描述**:IE5和IE6在处理盒模型时也存在差异。 - **解决方法**:建议使用`box-sizing:border-box`来解决盒模型的计算差异。 ##### 7. ul和ol列表缩进问题 - **问题描述**:不同浏览器对`ul`和`ol`的默认...

    web前端面试题

    - IE6 的双边距 bug 是指当块级元素设置 float 并同时设置横向 margin 时,IE6 下的 margin 会出现双倍的现象。 **38. HTML 与 XHTML ——二者有什么区别?** - HTML 是一种更为宽松的标记语言规范。 - XHTML 是 ...

Global site tag (gtag.js) - Google Analytics