document.documentElement.className = 'no-fouc';
// add to document ready: $('.no-fouc').removeClass('no-fouc');
然后将其添加到文档就绪事件中：
$('.no-fouc').removeClass('no-fouc');
4.双边距
有时，在IE中，margin属性可以加倍，例如，对于浮动元素来说，5px的归因边距最终可以达到10px。这个bug被称为双重保证金错误，在IE6中非常持久。但其修复非常简单。所有必须做的事情是将 display: inline规则应用于CSS中的浮动元素。
#content {
float: left;
width: 500px;
padding: 10px 15px;
margin-left: 20px;
display: inline;
}
5.容器的下降
IE6浏览器仅部分支持宽度，甚至是高度属性，因此它允许容器增长以容纳内容。这种无意识的增长迫使相邻的元素下降，绝对搞乱了页面布局。这个错误被称为Float-Drop错误，并且可以通过设计一个带有负片右边距的代码框来轻松修复该错误 position: relative。
.fixMe {
margin-right: -100px;
position: relative;
}
6.闪烁的背景图像
在IE6中，当CSS sprites用作链接或按钮的图像时，背景图像有时会闪烁。这是因为浏览器无法正确缓存背景图像并不断重新加载它们。这个错误有一个非常简单的修复方法，一行JavaScript强制浏览器缓存图像。
try {
document.execCommand('BackgroundImageCache', false,true true);
}
catch(e) {}
7.具有最小高度属性的案例
#inner-container {
min-height: 140px;
height: auto !important;
height: 140px;
}
结论
这些是一些最突出的问题，以及它们的简单修复。我希望你会发现它们有助于使你的网页在不同的浏览器上看起来和功能保持一致，尽管行业正朝着标准化发展，渲染引擎变得更加一致，但我知道这仍然是一项艰巨的任务。但是IE自带了一系列问题，使得制作兼容像素完美的页面变得非常具有挑战性。
因此，需要确保兼容性问题是真正解决的，并且不能仅仅依靠实施未经验证的对策。
为此，您可能需要一个跨浏览器测试工具， 以便您可以在所有支持的操作系统中测试所有版本的IE和Edge，并确保您的页面在IE版本和操作系统的不同组合中以您希望的方式显示。
所以，只需 查找， 调试和 测试。然后重复，直到你有一个完美的网站。
直到那时，快乐的测试！
閱讀更多 愛碼農 的文章
