在首次推出7年的韶光内，Internet Explorer霸占了95％的市场份额，但其份额从此崩溃至3.2％。目前，IE碰着大量兼容性问题，并且为了增加它的麻烦，乃至微软已经从IE的早期版本中撤回了它的所有支持，并将其重点转移到了新的浏览器Microsoft Edge上。
但纵然市场份额低落和缺少支持，IE依然设法在市场上霸占相称的份额，当我这样说的时候相信我，纵然IE浏览器的很小一部分用户的体验可能会造成或毁坏你的品牌，这对测试兼容性问题是绝对关键的。只管跨浏览器兼容性是一件大事，但所有浏览器的表现仍旧不同，纵然涉及边距和添补的处理办法，字体如何呈现，或者元素的默认样式如何阐明等等。 IE本身带有这样的问题，在这里我将要谈论一些最突出的问题。
1.页面元素更窄这是Internet Explorer中最臭名昭着的CSS问题之一，乃至有它自己的名字 - Internet Explorer Box Model bug。
这是早期IE版本处理元素大小的办法，或者说，网页中的盒子模型，使得页面元素看起来更窄。这是由于IE引擎无法呈现HTML元素的大小，如W3C推举用于CSS的margin和padding。
最安全的方法是利用条件注释，这些注释的内容只能被指定的浏览器读取。
条件注释的基本形式如下，可用于指定IE的条件。
<!--[if IE ]>
<link href=\"大众iecss.css\公众 rel=\"大众stylesheet\公众 type=\"大众text/css\"大众>
<![endif]-->
2.消逝的背景图像IE有时会使背景图像乃至浮动元素所包围的文本消逝，尤其是在向上或向下滚动网页时。刷新页面后，背景常日会重新涌现。
办理此问题的一种方法是将CSS命令插入 position: relative 包含背景图像的CSS规则中。
你可以试试这个命令：
.try {
background: url(filename.jpg);
position: relative
}
3.页面的无版本的闪烁有时，当加载网站时，在外部CSS样式表的加载完成之前，页面的未风格版本可能会涌现一两次。这是Unstyled内容Flash（FOUC）的一个案例。
样式规则加载后，页面立即自行纠正。但是，这个bug仍旧令人烦恼，并且常常令人困惑。
办理此问题的一种方法是利用John Polacek共享的方法，即将以下脚本插入文档的头部。
<style type=\"大众text/css\"大众>
.no-fouc {display: none;}
</style>
<script type=\"大众text/javascript\"大众>
document.documentElement.className = 'no-fouc';
// add to document ready: $('.no-fouc').removeClass('no-fouc');
</script>
然后将其添加到文档就绪事宜中：
$('.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.具有最小高度属性的案例设置元素的最小高度对付得到像素完美图像是必不可少的，但是IE6完备忽略了这个属性，只是从声明的最小高度获取高度值。这个问题的即时修复是共享代码片段。
#inner-container {
min-height: 140px;
height: auto !important;
height: 140px;
}
结论这些是一些最突出的问题，以及它们的大略修复。我希望你会创造它们有助于使你的网页在不同的浏览器上看起来和功能保持同等，只管行业正朝着标准化发展，渲染引擎变得更加同等，但我知道这仍旧是一项艰巨的任务。但是IE自带了一系列问题，使得制作兼容像素完美的页面变得非常具有寻衅性。
因此，须要确保兼容性问题是真正办理的，并且不能仅仅依赖履行未履历证的对策。
为此，您可能须要一个跨浏览器测试工具， 以便您可以在所有支持的操作系统中测试所有版本的IE和Edge，并确保您的页面在IE版本和操作系统的不同组合中以您希望的办法显示。
以是，只需 查找， 调试和 测试。然后重复，直到你有一个完美的网站。
直到那时，快乐的测试！
