顶部右侧 | 自行修改 顶部左侧内容
当前位置:网站首页 > SEO建站 > 正文

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

seo秀 2018-06-05 758 浏览 0 评论

Internet Explorer可能会成为开发人员的焦点,因为它具有无数的兼容性问题。本文介绍了一些HTML,CSS和JavaScript解决方法。

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


在首次推出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版本和操作系统的不同组合中以您希望的方式显示。

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

直到那时,快乐的测试!


相关推荐

什么样的域名会对seo有帮助?
  • 什么样的域名会对seo有帮助?
  • 什么样的域名会对seo有帮助?
  • 什么样的域名会对seo有帮助?
  • 什么样的域名会对seo有帮助?
网站的域名被拦截怎么办? 教你快速解除各种拦截!
  • 网站的域名被拦截怎么办? 教你快速解除各种拦截!
  • 网站的域名被拦截怎么办? 教你快速解除各种拦截!
  • 网站的域名被拦截怎么办? 教你快速解除各种拦截!
  • 网站的域名被拦截怎么办? 教你快速解除各种拦截!
域名备案与否对网站seo的影响分析
域名备案与否对网站seo的影响分析

从搜索引擎算法考虑,域名备案与否对网站seo的影响是几乎没有的;从用户行为角度考虑,未备案的域名会不利于网站的seo。有参加seo培训的朋友咨询我,准备做一个网...

3个月前 (07-15) seo秀

百度小程序全套源码下载、免费分享,一键生成百度小程序
  • 百度小程序全套源码下载、免费分享,一键生成百度小程序
  • 百度小程序全套源码下载、免费分享,一键生成百度小程序
  • 百度小程序全套源码下载、免费分享,一键生成百度小程序
  • 百度小程序全套源码下载、免费分享,一键生成百度小程序
如何将WordPress网站生成APP(移动应用程序)
  • 如何将WordPress网站生成APP(移动应用程序)
  • 如何将WordPress网站生成APP(移动应用程序)
  • 如何将WordPress网站生成APP(移动应用程序)
  • 如何将WordPress网站生成APP(移动应用程序)
网站SEO是什么?以个人多年从事互联网研究经验让你快速认识seo
网站SEO是什么?以个人多年从事互联网研究经验让你快速认识seo

很多初学者刚接触seo时,在知道seo的含义之后,才能更好的去学习seo。那么,到底什么是seo呢,从官方的解读来看,SearchEngineOptimiz...

4个月前 (06-02) seo秀

网站没有流量怎么办?
网站没有流量怎么办?

今天不讨论企业为什么要做网站,单纯的说一说网站没有流量怎么办?相信很多企业主小白站长都有过这样一段经历,对新网站寄予很大的希望,觉得自己建好网站以后就可以有源源...

5个月前 (05-24) seo秀

游族网络发布2019年一季报 多款新品年内测试
游族网络发布2019年一季报 多款新品年内测试

4月29日晚,游族网络发布了2019年度第一季度报告。游族网络2019年一季度实现营业收入8.33亿元,归属于上市公司股东的净利润1.73亿元。步入2019年以...

6个月前 (05-01) seo秀

游香港 约见甄子丹 超威电池联营商有话说
  • 游香港 约见甄子丹 超威电池联营商有话说
  • 游香港 约见甄子丹 超威电池联营商有话说
  • 游香港 约见甄子丹 超威电池联营商有话说
  • 游香港 约见甄子丹 超威电池联营商有话说
木瓜移动告诉你,移动广告“填充率”究竟有什么用?

    说到移动广告的填充率,可能很多人都是一头雾水,不甚了解。其实在移动广告的平台中,填充率是很重要的一项,是对发布商从广告网络成功发送和收到广告展示请...

欢迎 发表评论: