`
rainwang
  • 浏览: 14748 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

IE六display:none 三像素bug

阅读更多
前几天在项目中有个选项卡,采用display:none属性进行切换。



内容区的css结构分为左、中、右三列,绿色显示的是带圆角的三像素垂直线条,蓝色区域是正文,红色区域是灰色背景。

为了方便说明问题,将代码结构精简为:
<div style="width:230px; margin:20px; border:2px solid #000; overflow:hidden; zoom:1;"> 
<div style="background:green; width:3px; float:left; height:300px;"></div> 
<div style="background:blue; float:left; height:300px; width:224px;"></div> 
<div style="display: none; "></div> 
<div style="background:green; width:3px; float:left; height:300px;"></div> 
</div>


IE六三像素bug下的显示:


其余浏览器正常

问题:在总体宽度正确情况下右边绿色的线条换行了,如果去掉{<div style="display: none; "></div> }这个隐藏容器的话是没有问题滴。

那么我们如何解决呢?display:none的属性它是不占物理空间的。当时候我和同事的想法就是将隐藏容器的宽度、高度、行高设为0,经test没有效果,写IE6的hack也没用,把右侧3像素浮动方向改变也没用……试了好多方法没用。

经奋战,将最后一个div加一个margin-right:-3px
<div style="width:300px; margin:20px; border:1px solid #000; overflow:hidden; zoom:1;"> 
<div style="background:green; width:10px; float:left; height:300px;"></div> 
<div style="background:red; float:left; height:300px; width:280px;"></div> 
<div style="display: none; "></div> 
<div style="background:green; width:10px; float:left; height:300px;margin-right:-3px"></div> 
</div>

  • 大小: 97 KB
  • 大小: 5 KB
分享到:
评论

相关推荐

    CSS+DIV网页布局技巧(精髓)

    解决IE的“3像素” bug 在IE中,当一个浮动元素旁边有一个固定宽度的元素时,该固定宽度的元素可能会出现3像素的额外外边距。解决方法是在浮动元素上设置负的右外边距: ```css *html #left { margin-right: -3...

    web前端面试题5.doc

    - 解决IE6的双倍边距BUG,可以使用负margin补偿法: ```css .clearfix { display: inline-block; /* 或 display: block; */ } .clearfix { *zoom: 1; } /* 引入hasLayout触发 */ .clearfix:before, .clearfix...

    最全的CSS浏览器的兼容问题

    本文针对CSS浏览器兼容性问题进行了较为详细的介绍,包括去除a链接虚线框、实现背景透明、垂直居中、解决IE6的margin加倍问题、浮动元素间的间距问题、解决IE的宽度和高度问题以及解决DIV浮动文本3像素的bug等。...

    美工组面试问题.docx

    2. 解决IE6双倍边距BUG,可以使用`display:inline`或`display:block`,如: ``` div { float: left; margin-left: 10px; display: inline; } ``` 3. 无法定义1px左右高度的容器是因为浏览器的渲染机制,可以...

    css 布局精简技巧

    IE浏览器存在一个浮动元素的双边距bug,可通过设置`display:inline`来解决这个问题。 10. **列表横向排列** 列表项`li`默认是垂直堆叠的,若需水平排列,可设置`display: inline`或`display: flex`,并移除列表间...

    web前端面试宝典

    - **display: none**:完全隐藏元素,不占用空间。 - **visibility: hidden**:隐藏元素但保留空间。 - **opacity: 0**:使元素不可见,但仍保留空间。 **区别**: - `display: none`:完全移除元素。 - `...

    CSS浏览器的兼容问题

    DIV浮动IE文本产生3像素的bug - **IE下的解决方案**: ```css #left { float: left; width: 50%; *margin-right: -3px; /* IE6/7 专有 */ } ``` #### 四、总结 CSS兼容性问题是前端开发中不可避免的一个...

    面试宝典之吊打面试官系列

    - **问题**: IE的双边距BUG:块级元素float后设置横向margin,ie6显示的margin比设置的较大。 - **答案**: 这是IE6的一个bug,可以通过添加额外的负margin或使用CSS hack来解决。 **38. HTML与XHTML的区别** - **...

    网页设计面试题

    3. IE6 下链接伪类 hover 过后,CSS 背景图片出现闪动的 BUG: 这个 BUG 的原因是 IE6 的一个 bug,解决方法是使用以下 CSS 代码: ``` a:hover {background-image: none;} ``` 或者使用 JavaScript 代码来解决这个...

    CSS BUG解决方法以及CSS BUG类的小技巧

    对于IE6特有的Box Model bug,可以通过设置`box-sizing`属性或者使用`display`属性来调整元素的尺寸计算方式。 处理两个层之间3像素间隙的“IE3pxbug”通常需要避免浮动或调整元素的布局方式,有时可以通过负margin...

    javascript面试题

    **40、IE 的双边距 BUG:块级元素 float 后设置横向 margin,ie6 显示的 margin 比设置的较大。解决:加入 _display:inline** 此 bug 在 IE6 中较为常见,解决方法是在元素上添加 `_display: inline` 或使用其他 ...

    前端面试题汇总

    - **IE 特有的 Bug**:如双边距 Bug,使用条件注释或 Hack 解决。 **40. 对WEB标准及W3C的认识** - **W3C**:万维网联盟,负责制定 Web 标准。 - **重要性**:确保不同平台之间的互操作性,提高网页的可访问性和...

    H5 面试题总结

    ### H5前端面试题知识点详解 ...##### 1. 测试过的浏览器及其内核 ...- IE6/7/8 的特定问题(如双边距 bug)。 以上内容涵盖了H5前端面试题中的核心知识点,希望能帮助你在面试过程中更加自信地应对各种问题。

    DIV+CSS教程——第三天二列和三列布局借鉴.pdf

    7. **IE6的3像素bug**: - 这是一个历史遗留问题,当`float`元素与非`float`元素相邻时,IE6浏览器可能会出现3像素的偏差。解决方法包括使用特定的IE6 hack,如负边距或特定的CSS属性。 8. **CSS布局技巧**: - ...

    在IE6,7中遇到未知的问题无法解决时可以尝试触发其layout

    - **IE5-6/win的3像素偏移bug**:元素在垂直方向上有3像素的偏移。使用`_height: 1%;`(私有属性)可以修复。 - **E6的躲躲猫bug(peek-a-boo bug)**:元素的高度计算不正确,导致内容显示不全。同样通过`_height: ...

    前端开发的面试经

    - **3像素文本偏移bug**:当文本与浮动元素相邻时,IE6可能会出现文本偏移的问题。 - **布局控制**:IE使用一种称为“布局”的概念来控制元素尺寸和定位,这在其他浏览器中可能不存在。 #### 三、标准模式与Quirks...

    web前端面试题

    IE 的双边距 BUG:块级元素 float 后设置横向 margin,ie6 显示的 margin 比设置的较大。** - IE6 的双边距 bug 是指当块级元素设置 float 并同时设置横向 margin 时,IE6 下的 margin 会出现双倍的现象。 **38. ...

Global site tag (gtag.js) - Google Analytics