如何建立一个与IE兼容的网站

  • 时间:2018-06-06 00:36 作者:爱码农 来源:爱码农 阅读:542
  • 扫一扫,手机访问
摘要:Internet Explorer可可以会成为开发人员的焦点,由于它具备无数的兼容性问题。本文详情了少量HTML,CSS和JavaScript处理方法。在初次推出7年的时间内,Internet Explorer占据了95%的市场份额,但其份额从此崩溃至3.2%。目前,IE遇到大量兼容性问题,并且为了

Internet Explorer可可以会成为开发人员的焦点,由于它具备无数的兼容性问题。本文详情了少量HTML,CSS和JavaScript处理方法。

如何建立一个与IE兼容的网站

在初次推出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的条件。

2.消失的背景图像

IE有时会使背景图像甚至浮动元素所包围的文本消失,尤其是在向上或者向下滚动网页时。刷新页面后,背景通常会重新出现。

处理此问题的一种方法是将CSS命令插入 position: relative 包含背景图像的CSS规则中。

你能试试这个命令:

.try {

background: url(filename.jpg);

position: relative

}

3.页面的无版本的闪烁

有时,当加载网站时,在外部CSS样式表的加载完成之前,页面的未风格版本可可以会出现一两次。这是Unstyled内容Flash(FOUC)的一个案例。

样式规则加载后,页面立即自行纠正。但是,这个bug依然令人烦恼,并且经常令人困惑。

处理此问题的一种方法是用John Polacek共享的方法,即将以下脚本插入文档的头部。

而后将其增加到文档就绪事件中:

$('.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版本和操作系统的不同组合中以您希望的方式显示。

所以,只要 查找, 调试和 测试。而后重复,直到你有一个完美的网站。

直到那时,快乐的测试!

  • 全部评论(0)
上一篇:我是一只爬虫
下一篇:Bootstrap CSS概览
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部