最常见IE的Bug及其fix修复方法( 二 ) _云知道

height: 2px;
margin: 30px 0;
font-size: 0;
}
解决方案二
但是最佳的解决方法是使用 overflow: hidden。

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
overflow: hidden
}
5. 跨出边界这个BUG是很难看的。当父元件中使用了 overflow 的 auto 属性，并且在其里放入相关元件。你会看来里面的元件会跨出来。下面是一个示例：

div id=elementdiv id=anotherelement/div/div

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 150px;
margin: 30px 0;
overflow: auto;
}

#anotherelement{
background: #555;
width: 150px;
height: 175px;
position: relative;
margin: 30px;
}期望的结果：

IE的结果：

解决方法
设置 position: relative;属性

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 150px;
margin: 30px 0;
overflow: auto;
position: relative;
}
6. Fixing the Broken Box ModelInternet Explorer曲解了盒子模子可能是最不可原谅的事情了。IE 6 这个半标准的浏览器回避了这个事情，但这个问题还是会因为IE运行在怪异模式下出现。
两个Div元件。一个是有fix的，一个是没有的。而他们不同的高和宽加上padding的总合却是不一样的。下图的上方是被修正的，下方则没有。

解决方法
我相信这个事情即不需要解释也不需要演示，这应该是大多数人都明白的。下面是一个很相当怪异的解决方案

#element{
width: 400px;
height: 150px;
padding: 50px;
}
上面的定义也就是说：

#element {
width: 400px;
height: 150px;
height: 250px;
width: 500px
}
是的，你要原来的长和宽上加上了padding 。但这个fix只会作用于IE了的怪异模式，所以你不需要担心在IE6的正常模式下会有问题。
7. 设置min-height和min-widthIE忽略了min-height 。
解决方法一
这个fix由 Dustin Diaz提供。其利用了 !important 下面是代码片段：

#element {
min-height:150px;
height:auto !important;
height:150px;
}
解决方法二

#element {
min-height: 150px;
height: 150px;
}

htmlbody #element {
height: auto;
}
8. Float 布局错误行为 Misbehaving使用无table的布局最重要的就是使用CSS的float元件。在很多情况下，IE6处理起来好像在摸索阶段，有些时候，你会发现很多奇怪的行为。比如在其中有一些文本的时候。
来看一下下面这个示例：
div id=container
div id=elementhttp://net.tutsplus.com/