来自：http://www.99css.com/?p=43
在 web app 项目中经常遇到这个 bug，国外称之为100% ≠ 100% bug，又分为两种：
div 的宽度 100% ≠ 100% (IE 6&7)需求：
- 标准模式
- #container 局部滚动
- #asie 固定宽度
- #content 自适应宽度
再复杂一点还会要求两列等高，可参考 http://www.99css.com/?p=40
HTML
<div id="container"> <div id="wrapper"> <div id="content"> <h2>Content</h2> </div> </div> <div id="aside"> <h2>Aside</h2> </div> </div>
当然，别忘了 DTD 声明，因为这个只存在于标准模式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
用之前介绍的HTML5 写法亦可：
<!DOCTYPE html>
CSS
/*简单重置*/ body, div, h2{margin:0;padding:0;} /*设置颜色，方便区分*/ #container{background:yellow;} #content{background:#FF8539;} #aside{background:#B9CAFF;} /*去除html默认滚动条*/ html{overflow-y:hidden;} /*关键布局代码*/ #container{height:300px;overflow:auto;} #wrapper{float:left;width:100%;margin-left:-200px;} #content{margin-left:200px;} #aside{float:right;width:200px;}
当#content, #aside{height:200px;}时，即高度未超出#container时一切正常
[图片]
当#content, #aside{height:400px;}时，出现纵向滚动条
正常显示效果如下：
［图片］
E 6&7 中 bug 出现：
原因：IE 6&7 滚动条的宽度未算在 100% 中，理想的状况是：#container 的宽度(100%) + #container 滚动条的宽度
= body 的 100%，W3C对此的定义：
In the case of a scrollbar being placed on an edge of the element’s box,
it should be inserted between the inner border edge and the outer padding
edge. Any space taken up by the scrollbars should be taken out of (subtracted
from the dimensions of) the containing block formed by the element with
the scrollbars.
《Internet Explorer 100% Width Bug》中给出了思路：
element_selector { width: expression(this.parentNode.offsetHeight > this.parentNode.scrollHeight ? '100%' : parseInt(this.parentNode.offsetWidth - XX) + 'px'); }
其中 XX 是滚动条的宽度，在 Windows XP 主题下是 17px，Windows 经典主题下稍微小一点，在其他第三方系统主题下有可能是不确定宽度。
根据下图，简单改进一下即可
[图片]
IE6
［图片］
解决方法(原理同上)
body{_width:expression(this.parentNode.offsetHeight > this.parentNode.scrollHeight ? '100%' : parseInt(this.parentNode.clientWidth) + 'px');}
-
解决方法
#wrapper{#width:expression(this.parentNode.offsetHeight > this.parentNode.scrollHeight ? '100%' : parseInt(this.parentNode.clientWidth) + 'px');}
当然，写在 js 中亦可，不过要注意不要漏掉 window 的 riseze 事件，另外，window 的 resize 事件在 IE 中有执行多次的
bug
-
body 的宽度 100% ≠ 100% (仅 IE6)通常表现为 iframe 出现纵向滚动条时同时出现横向滚动条，简单粗暴的使用
body{overflow-x:hidden;}是不负责任的，有时会截断要显示的内容第一个页面(父页面) <iframe frameborder="0" height="300" scrolling="auto" src="iframe.html" width="500">
第二个页面(iframe)
HTML
<div></div>
CSS
body, div{margin:0;padding:0;} div{background-color:yellow;height:500px;}
正常效果
［图片］
分享到：
相关推荐
在Web开发过程中，尤其是针对IE6浏览器，开发者经常会遇到各种显示异常的问题，这些问题是由于IE6浏览器本身的渲染机制和对CSS标准支持不完全所导致的。以下是一些常见的IE6 bug及其解决方案： 1. **DOCTYPE声明**...
- **问题描述**：在IE6/7中，当子元素具有`position: relative`属性时，将父元素设置为`overflow: [hidden | auto]`等同于将子元素的定位模式重置为默认的`position: static`。 - **解决方案**：为父元素设置`...
3. **IE8的渲染模式选择**：IE8支持两种渲染模式，即标准模式和怪异模式，可以通过元标签来控制其采用哪种模式。 #### 二、解决div错位的方法 - **调整`margin`值**：为了修复IE6中div错位的问题，可以尝试调整div...
在IE7中，如果一个Div的内容超出了预设高度，会导致内容重叠。可以使用JavaScript表达式来动态调整高度，例如： ```css position: relative; height: expression(this.style.height >= this.scrollHeight ? '880...
在实验2中，尽管DOCTYPE声明使得浏览器处于标准模式，但`#content_1`和`#content_2`之间的间距在IE6中比Firefox等其他浏览器更大，这就是由于双倍边距bug。解决这个问题的一种常见方法是使用`display:inline-block`...
这段代码中，我们不仅设置了宽度为 100% 和最小宽度为 980px，还通过 _width 表达式来确保在 IE6/IE7 中元素的宽度不会小于 980px。 需要注意的是，上述解决方案中使用的表达式和私有属性，虽然可以在 IE6 中实现...
CSS表达式（`expression`）在IE6/7中可用，但性能较差，应尽量避免使用，改用JavaScript处理。 10. **DOCTYPE声明** IE6在不同的DOCTYPE模式下呈现效果不同，使用严格的XHTML1.0或HTML5 DOCTYPE可使IE6进入Quirks...
- 如果希望页面在IE8中按照IE7的标准模式渲染，可以使用如下代码： ```html <meta http-equiv="X-UA-Compatible" content="IE=7"> ``` - 为了避免IE5的quirks mode，必须为文档指定一个DOCTYPE声明。 #### CSS ...
这个Hack仅在IE7的标准模式下有效，不适用于其他浏览器。 7. **子选择器Hack**：IE6及更早版本不支持子选择器`(>)`，所以可以利用这一点为其他浏览器编写特定样式。例如： ```css div > p { ...styles... } ``` ...
IE6 和 IE7 中存在许多渲染问题，这些问题可以通过激活元素的 `hasLayout` 属性来解决。这个特性允许浏览器正确地理解元素的边界和位置，特别是在需要将行内元素变为块级元素或者实现透明效果时尤为重要。 **示例：...
在标准模式下（例如在Firefox或IE8中），元素的高度通常是根据其内容自动调整的。然而，在IE6中，如果元素的高度没有被显式定义，则可能不会正确地反映其内部内容的实际高度。 **问题示例：** 假设有一个`<div>`...
这里提到的问题是关于IE6、IE7以及在IE8、9、10中使用IE7兼容模式下，对于绝对定位（absolute）或相对定位（relative）的父元素和子元素的显示与隐藏的一个特定bug。这个bug主要涉及到元素的`display`属性。 通常，...
要编写一个兼容IE6, IE7, IE8浏览器的无缝自动轮播，需要注意这些浏览器的兼容性问题。因为IE6, IE7, IE8等浏览器对ES5的一些特性支持不全，所以不能使用现代的JS写法，如let, const, 箭头函数等。我们必须使用ES5或...
由于图片设置了固定的宽度（即不是auto），并且尝试保持max-width:100%的约束，结果就是图片的宽度计算成了0，因此在IE8标准模式中它不会显示。 在了解了造成问题的条件之后，我们可以探讨如何修复这一现象： 1. ...
- IE8引入了对DOCTYPE的识别，以启用“标准模式”，从而更好地遵循W3C标准，但IE6和IE7在没有严格DOCTYPE声明时会默认进入“quirks mode”。 5. **重要bug和不兼容问题**： - 一些常见的IE CSS bug包括双倍边距...
解决方法：使用`box-sizing`属性，将其设置为`border-box`（IE模式）或`content-box`（标准模式）。 二、浮动元素处理 1. IE的浮动：IE6有时会出现浮动元素的父元素高度塌陷问题，需要额外的清除浮动技巧，如`...
在网页设计中，CSS（层叠样式表）的浏览器兼容性问题一直是开发者面临的挑战，特别是针对Internet Explorer（IE）和Firefox这两个主流浏览器。本文将详细阐述一些针对IE和Firefox的CSS兼容性处理技巧。 首先，要...
此外，IE6还有一个著名的“双倍边距BUG”，当一个浮动元素设置`margin-left`时，IE6会计算两次，解决办法是： ```css div { float: left; margin-left: 10px !important; /* 解决IE6双倍边距 */ margin-left: 10...