代码之家 › 专栏 › 技术社区 › Joel Glovier

用JavaScript解决IE6中的CSS问题的最佳方法是什么?

internet-explorer-6 internet-explorer css

Joel Glovier · 技术社区 · 16 年前

我知道这可以归结为一个哲学问题,所以我不打算就此话题展开讨论。但我正在寻找解决问题的最佳方法最 Internet Explorer 6中的CSS样式问题。

我知道 this article on forabeautifulweb.com ,建议只向IE6用户提供一个通用的纯IE6样式表,其基本样式比浏览器默认样式要好。对于我的申请,这不是最好的。

我也知道通过javascript“修复”IE6的CSS支持的概念,我有点喜欢这个想法。但我不知道(如果有的话)最好的是什么——我知道有几个在野外漂浮。 This article by Eric Meyer mentions one ,但这是近两年前写的,所以现在是否有更标准的脚本用于此目的?

有人能给我指一两个这样的脚本吗?这些脚本已经被证明对更新IE6处理CSS的某些操作非常有效,使其行为更像现代浏览器?

最新消息:对于所有试图说服我不要使用JS来解决问题的回答者来说——我正在塞住耳朵,嗡嗡作响。:)

说真的,我不是在问是否要使用JS。我们已经决定不需要支持IE6,不值得我们花时间尝试仅为IE6“调试”样式表。这个决定是基于我们的读者和我们的网站对IE6使用情况的统计。

关于“如果用户没有启用JS怎么办?”在这种情况下,我们网站上的很多东西看起来都不太好,所以这有点像是一个哑点。

我已经实现了Gordon建议的IE7.js,这足以让我们在IE6中度过难关,而且没有什么缺点。

同样感谢大家的意见。

7 回复 | 直到 16 年前

Gordon Haim Evgi 16 年前

你可以使用 this library 如果你想用javascript来完成它:

ie7.js是一个javascript库,用于使Microsoft Internet Explorer的行为类似于符合标准的浏览器。它修复了许多HTML和CSS问题,并使透明PNG在IE5和IE6下正常工作。

也有 CSS3Pie ,这为浏览器添加了CSS3支持:

Pie使Internet Explorer 6-8能够呈现几种最有用的CSS3装饰功能。

Fenton 16 年前

请不要使用javascript来解决问题,只需在样式表中添加一些规则来解决问题…

<link rel="stylesheet" type="text/css" href="normal.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

在ie6.css中,你只是有一些规则可以修改样式,使其在ie6中工作,你仍然在它旁边使用普通样式表,所以你的站点在ie6和普通世界中看起来是一样的。

Adam Tomat 16 年前

根据个人经验,IE6可以被固定在几行CSS中,并通过Firebug/Developers工具栏进行一些检查。不需要有条件的评论。

我遇到的大多数问题都是基于填充/边缘的,这取决于我第一轮没有使用最佳方法。
我也发现 overflow:hidden 也修复了它在IE6 bug中的公平份额。

我建议,打开IE6 developers toolbar 试着找出问题所在,并想出一个更好的方法来编写该部分的代码。

就我个人而言,我用有条件的评论作为最后的手段。

Paul D. Waite 16 年前

Dean Edwards_ie7.js脚本(由Gordon链接)仍然是该领域的最新技术。

至于什么是最好的方法,这取决于。Dean Edwards_Script修复了许多IE CSS错误,并允许您使用诸如多类选择器和IE 6中根本不支持的子选择器之类的选择器。

如果您对目标用户中的IE 6用户倾向于打开JavaScript感到高兴,那么像Dean_s这样的库可以为您节省大量时间,并允许您使用IE 6不支持的选择器来减少代码。

但是,您可能仍然需要一个IE 6样式表来处理Dean_s Library无法修复的问题。

最好的解决方案可能是等待微软停止支持IE 6(就像他们在Mac IE 5上所做的那样),因为如果微软不支持它,人们很难期望你这样做。我们现在 hoping for 2014 在这一点上。

Olly Hodgson 16 年前

一般来说,您不需要JavaScript。您可以使用普通的旧CSS。了解 hasLayout 不过。

通常,您可以通过给出问题元素布局来修复IE6和7的问题。要做到这一点,给它一个固定的 height 或 width 或使用专有的 zoom .

我最喜欢的针对IE浏览器特定版本的方法是使用条件注释添加 <div> 作为…的直系子女 <body> 这让我知道我是哪一个版本的。( like so )这样,我可以直接针对IE6:

.IE6 div.fubar {
    zoom: 1;
}

另一件要记住的是,要在IE6/7/8/firefox/safari/chrome/opera上实现像素均等几乎是不可能的,因此,如果在一个使用了近十年的浏览器中,有些东西看起来不太对劲,您不必总是担心它。

Position is everything 对IE bug也有一些有用的提示。

Sorcy Tatu Ulmanen 16 年前

如果可以避免的话,不要使用javascript——您不能保证您的用户已经激活了JS(如前所述),并且您实际上不需要它。

为了解决浏览器(不仅仅是IE)中不同解释的许多问题,用户需要一个CSS重置样式表。周围有很多漂浮物。

更好的是,使用一个CSS框架,它可以消除不同浏览器之间的许多问题,并提供许多有用的类来解决标准问题。

我为一个爱山药( http://www.yaml.de/en/home.html ,然后是蓝图( http://www.blueprintcss.org/ )可能还有其他一些。相信我-一旦你使用了一个CSS框架,你就永远不会想回去了。

-3

scubacoder 16 年前

jQuery 它的插件最适合IE6问题。试一试!