「如何建立一个与IE兼容的网站」百家号

「如何建立一个与IE兼容的网站」百家号_作者自评：

如何看待百家号Lite小程序热议话题「如何建立一个与IE兼容的网站」
InternetExplorer可能会成为开发人员的焦点，因为它具有无数的兼容性问题。本文介绍了一些HTML，CSS和JavaScript解决方法。
在首次推出7年的时间内，InternetExplorer占据了95％的市场份额，但其份额从此崩溃至3.2％。目前，IE遇到大量兼容性问题，并且为了增加它的麻烦，甚至微软已经从IE的早期版本中撤回了它的所有支持，并将其重点转移到了新的浏览器MicrosoftEdge上。
但即使市场份额下降和缺乏支持，IE依然设法在市场上占有相当的份额，当我这样说的时候相信我，即使IE浏览器的很小一部分用户的体验可能会造成或破坏你的品牌，这对测试兼容性问题是绝对关键的。尽管跨浏览器兼容性是一件大事，但所有浏览器的表现仍然不同，即使涉及边距和填充的处理方式，字体如何呈现，或者元素的默认样式如何解释等等。IE本身带有这样的问题，在这里我将要讨论一些最突出的问题。
1.页面元素更窄
这是InternetExplorer中最臭名昭着的CSS问题之一，甚至有它自己的名字-InternetExplorerBoxModelbug。
这是早期IE版本处理元素大小的方式，或者说，网页中的盒子模型，使得页面元素看起来更窄。这是因为IE引擎无法呈现HTML元素的大小，如W3C推荐用于CSS的margin和padding。
最安全的方法是使用条件注释，这些注释的内容只能被指定的浏览器读取。
条件注释的基本形式如下，可用于指定IE的条件。
<!--[ifIE]>
<linkhref="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仍然令人烦恼，并且经常令人困惑。
解决此问题的一种方法是使用JohnPolacek共享的方法，即将以下脚本插入文档的头部。
<styletype="text/css">
.no-fouc{display:none;}
</style>
<scripttype="text/javascript">
document.documentElement.className='no-fouc';
//addtodocumentready:$('.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:10px15px;
margin-left:20px;
display:inline;
}5.容器的下降
IE6浏览器仅部分支持宽度，甚至是高度属性，因此它允许容器增长以容纳内容。这种无意识的增长迫使相邻的元素下降，绝对搞乱了页面布局。这个错误被称为Float-Drop错误，并且可以通过设计一个带有负片右边距的代码框来轻松修复该错误position:relative。
.fixMe{
margin-right:-100px;
position:relative;
}6.闪烁的背景图像
在IE6中，当CSSsprites用作链接或按钮的图像时，背景图像有时会闪烁。这是因为浏览器无法正确缓存背景图像并不断重新加载它们。这个错误有一个非常简单的修复方法，一行JavaScript强制浏览器缓存图像。
try{
document.execCommand('BackgroundImageCache',false,truetrue);
}
catch(e){}7.具有最小高度属性的案例
设置元素的最小高度对于获得像素完美图像是必不可少的，但是IE6完全忽略了这个属性，只是从声明的最小高度获取高度值。这个问题的即时修复是共享代码片段。
#inner-container{
min-height:140px;
height:auto!important;
height:140px;
}结论
这些是一些最突出的问题，以及它们的简单修复。我希望你会发现它们有助于使你的网页在不同的浏览器上看起来和功能保持一致，尽管行业正朝着标准化发展，渲染引擎变得更加一致，但我知道这仍然是一项艰巨的任务。但是IE自带了一系列问题，使得制作兼容像素完美的页面变得非常具有挑战性。
因此，需要确保兼容性问题是真正解决的，并且不能仅仅依靠实施未经验证的对策。
为此，您可能需要一个跨浏览器测试工具，以便您可以在所有支持的操作系统中测试所有版本的IE和Edge，并确保您的页面在IE版本和操作系统的不同组合中以您希望的方式显示。
所以，只需查找，调试和测试。然后重复，直到你有一个完美的网站。
直到那时，快乐的测试！

该话题由百家号作者爱前端「简介:技术交流、资源共享，是程序员的网上乐园。」整理发布
更多有关如何建立一个与IE兼容的网站的话题讨论请关注百家号Lite小程序