开发与Internet Explorer兼容的网页有时很难。尽管微软已经撤回了Internet Explorer的支持,但它仍然是用户的热门选择。Internet Explorer与HTML的一些最重要的组件行为不当,无论是低高度,边距还是填充。
为了正确解决此问题,开发人员可以使用条件注释和CSS命令来定位特定于浏览器的命令。虽然由于其不再支持和兼容性问题,实际上不可能实现Internet Explorer的 100%兼容性,但有几种可行的方法可以确保用户获得体面的体验。虽然没有办法开发完美兼容的网页,但这里有一个关于如何开发兼容Internet Explorer 11及其他变体的Web应用程序的指南。
使用条件注释

条件语句是定位特定于给定浏览器的一段代码的最佳方式。他们确保代码针对所提到的浏览器,并且不会干扰现有代码。其他浏览器会忽略这些类型的HTML块。条件语句已经成为将额外的CSS嵌入到网页中以填补此类浏览器无能力空白的标准方法。例如,将以下代码与源代码一起合并到浏览器HTML中
< link href = “everything.css” rel = “stylesheet” >
<!
- [if IE]>
<link href =“stupidie.css”rel =“stylesheet”>
<!
[ENDIF] - >
仅适用于Internet Explorer(IE 9或更低版本)。因此,这将作为除Internet Explorer之外的所有其他浏览器的注释。您还可以通过提及确切的版本为特定的IE版本编写此代码。这样可以节省您在为Internet Explorer创建全新样式表时浪费的时间。除此之外,条件注释不需要DHTML或脚本,因此也不需要脚本引擎。条件注释仅在解析和下载阶段生效,因此实际上只下载了专门用于浏览器的内容。
不要跳过跨浏览器测试
在您的个人浏览器中看起来漂亮的代码可能在其他浏览器中行为不当。无论你的代码有多好,总有可能存在一些在另一个浏览器中不起作用的东西。这是您不应在不执行跨浏览器测试的情况下将网站上传到服务器的核心原因。
选择您可以访问多人浏览器的在线工具,这样您就不必担心错过流行的浏览器和操作系统组合。使用该工具对公共或本地托管的网页和应用程序执行实时和交互式跨浏览器测试。您可以使用该工具捕获自动截图,以加速Web布局测试。还有很多其他令人惊叹的在线跨浏览器测试工具。在继续测试过程之前检查它们。
使用某些CSS命令
Internet Explorer及其新兄弟Edge占据了相当大的受众群体。因此,考虑到IE和Edge用户的网页兼容性非常重要。每个浏览器的行为都不同,这就是为什么需要检查HTML页面和其他代码片段的跨浏览器兼容性的原因。以下是一些最有用的CSS命令,可用于提高与IE和Edge的兼容性:
减少背景图像和文本
Internet Explorer有时可以使背景图像和文本消失,由浮动元素包围,尤其是在页面滚动期间。要解决此问题,可以position: relative 在适用于背景图像的CSS规则中使用CSS命令 。
无格式版本的页面闪烁
偶尔在网站堆叠时,在加载外部CSS模板之前,页面的无格式形式可能会显示一两秒钟。这是一个无格式内容Flash(FOUC)的实例。虽然一旦加载了样式它就会自行纠正,但这个bug可能会让人感到困惑和困惑。
超出边界属性
例如,在IE中,一次又一次,边距属性可以加倍,并且浮动元素的指定边距10px最多可达20px。这个错误称为双边距错误,在IE6中非常一致。可以通过将display: inline 规则应用于CSS浮动元素来修复错误 。
丢弃一些容器
由于Internet Explorer只支持高度和宽度属性,因此经常会出现一个名为“Flat Drop Bug”的错误。容器长大于指定的大小,从而在页面上造成严重破坏。使用负右边距为您的方框设置样式以防止这种情况发生 除此之外,position: relative 在代码中加入一个 语句。
最小高度属性
IE有这种忽视min-height 财产的坏习惯 。它从声明最小高度获取一个,这会导致一些兼容性问题。在代码中使用以下语句来解决问题:
#inner-container {
min-height: 140px;
height: auto !important;
height: 140px;
}
一些JavaScript Hacks
尽管IE正在努力应对现代浏览器,但它仍然受到发展中国家的欢迎,这就是为什么HTML很好地支持IE非常重要的原因。除了上面的建议之外,还有一个CSS hack来实现与Internet Explorer 11兼容的Web应用程序。
闪烁的背景图像
当CSS用于按钮和链接时,背景图像有时会摇摆不定。发生这种情况是因为IE浏览器无法缓存背景图像,因此不断重新加载。您可以通过添加以下代码来解决此错误:
try {
document.execCommand('BackgroundImageCache', false,true true);
}
catch(e) {}
本文的目的是向您展示如何开发与Internet Explorer 11及更低版本兼容的Web应用程序。我们已经讨论了一些最突出的问题及其修复。但是,您不能仅仅依靠代码才能完美地适用于所有浏览器,并且必须始终测试您的网页以实现跨浏览器兼容性。
有很多工具可以确保您的页面看起来像您真正想要的那样。核心要求是确保解决网页上的所有问题,并且在任何Internet Explorer浏览器上都没有任何效果。最后但并非最不重要的是,Internet Explorer 11的企业模式在提供向后兼容性方面非常引人注目。企业模式站点列表包含将任何Web应用程序置于任何文档模式(包括IE8和IE7企业模式)的能力,甚至不更改单行代码。