html - 你如何处理 Internet Explorer？

Question

我知道关于这个话题可能还有其他问题。我想每个 Web 开发人员都会使用 IE 来解决这个问题。

我的问题：

我正在开发一个完全基于 Javascript 的基于 Web 的应用程序。我是 Mac 用户。我真的很高兴在 Safari、Firefox 和 Opera 中一切正常。然后我请一位使用 Windows 的朋友使用 Internet Explorer 进行检查，但结果并不好。我的应用程序对 HTML 标准非常敏感。

主要问题是 CSS 布局。由于 jQuery 的可移植性，JavaScript 本身似乎工作正常。

我的问题：

你如何处理 Internet Explorer？我应该创建一个只在 Internet Explorer 上加载的新 CSS 吗？我应该只为 Internet Explorer 创建一个新版本的应用程序吗？您通常如何处理这个问题？该应用程序在功能设计和布局设计方面都相当大。

编辑：

使用 Nosredna 建议的 CSS 重置，已经消除了几乎一半的问题。我想这确实是一个好习惯。我注意到 SO 也使用它。

score 57 · Accepted Answer

您是否指定了有效的文档类型？您可以通过将 Internet Explorer 切换到标准模式来使其更加兼容。http://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic2

您是否使用浏览器重置 CSS 文件？这可以帮助将版本组合在一起。http://meyerweb.com/eric/tools/css/reset/

注意 IE 的 CSS 错误：http ://www.positioniseverything.net/explorer.html

对于布局的骨架，考虑使用已知有效的标记，例如http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts或http://960.gs/用于液体或固定布局，分别。

跟上浏览器之间的 JavaScript 差异。jQuery 处理其中的一些，但不是全部。http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/

是的，IE 很痛苦。如果你想让它在 IE 中工作，你真的想每隔几天在 IE 中测试一次。你不想把痛苦留到最后——你想一次处理一个噩梦。

顺便说一句，如果您认为 IE 很痛苦，请尝试用手机查看您的页面。前几天，我带着 iPhone 去了 REI.com，屏幕中间的五分之一或更多的地方被一堆呈现为文本的乱码占据了。

score 25 · Accepted Answer

有条件的评论。

<!--[if IE 6]>
  <link rel="stylesheet" href="ie6.css">
<![endif]-->
<!--[if IE 7]>
  <link rel="stylesheet" href="ie7.css">
<![endif]-->
<!--[if IE 8]>
  <link rel="stylesheet" href="ie8.css">
<![endif]-->
<!--[if !IE]-->
  <link rel="stylesheet" href="normal.css">
<!--[endif]-->

在 IE 文件中，您可以使用@import导入normal.css，然后根据需要覆盖样式。

score 13 · Accepted Answer

首先，我不会等到项目完成后才考虑浏览器兼容性。

大多数情况下，对于 CSS 问题，有一些方法可以做一些不需要加载特定于浏览器的样式表的事情，所以我尽可能尝试使用这些解决方案。例如 - 如果您的大多数问题都与框模型问题有关，则使用嵌套 div 代替填充可以帮助确保一切看起来正确，而无需针对不同浏览器使用单独的样式表和模板。

score 11 · Accepted Answer

浏览器重置以启动。尽可能平衡游戏环境并取消浏览器默认设置。从头开始构建您的 CSS。（见： http: //meyerweb.com/eric/thoughts/2007/04/12/reset-styles/）

在开发过程中尽早并经常在所有主要浏览器上进行测试。

尽量在没有浏览器特定黑客的情况下完成。有时您需要使用一些特定于浏览器的 CSS，但它应该验证（使用 W3C 验证工具）。有时虽然它只是有条件的（甚至可能是一些 JavaScript），例如修复 IE6 中的透明 PNG（参见： http: //nettuts.com/videos/screencasts/5-easy-ways-to-tackle- ie6s-透明度问题/）。

如果您无法在其中一台开发机器上运行 IE，请尝试http://browsershots.org。至少你可以通过这种方式得到一些反馈。

使用 debug.css 突出显示或概述 div 和其他元素。如果在开发过程中需要的话，把它扔到你的 HTML 头中。这可能是一个巨大的帮助。

在可用的情况下使用“开发人员工具栏”（IE、Firefox）。

预计 IE 会很痛苦，并在 6、7 和 8 中进行测试。

玩得开心！

score 7 · Accepted Answer

首先，阅读On Have Layout，它解释了 IE 渲染引擎如何在内部工作。IE的渲染引擎是CSS之前的。它没有像您期望的那样正确区分内联元素和块元素。相反，在 IE 中，元素 hasLayout。或不。这是 99% 的 IE CSS 错误的来源。所以，多读几遍那篇文章。

至于修复，我通常使用条件注释。几个原因：

它们是面向未来的，而不是 CSS hack。如果 IE9 修复了 hack 但没有修复您使用它解决的错误怎么办？
它是有效的 (X)HTML （条件评论只是对其他人的普通评论）
它不需要javascript。您会惊讶于有多少人关闭了 javascript。

关于条件注释的一句话：永远不要使用开放式匹配。也就是说，永远不要做类似的事情：

<!--[if IE]> <load css> <![endif]-->
<!--[if gte IE 7]> <load css> <![endif]-->

原因与 hacks 相同：使其面向未来。如果下一个版本的 IE 修复了这个 bug，而您不再需要修复了怎么办？或者更糟糕的是，现在的“修复”实际上会在新的 IE 版本中弄乱你的布局？通常最好假设下一个版本的 IE 已经修复了您正在解决的错误。当 IE 8 出现时，我已经写过一些关于它的内容。

score 7 · Accepted Answer

以下是我尝试减少处理 IE 的痛苦的方法：

使用 reset.css - Yahoo! YUI 重置或Eric Meyer 的重置 CSS
小心浮动，清除 - 它们通常会引起很多诅咒。
请注意 IE 中的 hasLayout 错误，通常添加 zoom: 1 或 height 属性有助于解决此问题。阅读有布局。
让布局在 Firefox、Safari、Chrome 等中工作，同时保持 IE 大约 80% 的路径。
如果需要，使用条件注释实现 IE6.css 样式和 IE7.css 样式。
啤酒、白酒或其他成人饮料。

score 5 · Accepted Answer

我认为为 IE 编写一个特定的 css 文件是可以的。我知道这很痛苦，但由于一些定位问题，IE6 看起来与所有其他浏览器不同。

将此行用于新创建的 css 文件：

<!--[if ie6]><link rel="stylesheet" type="text/css" media="screen" href="ie6_style.css" /><![endif]-->

score 4 · Accepted Answer

4

由于IE 获得了大约 65% 的流量，我认为您不能将其视为事后的想法。

于 2009-05-29T19:34:49.697 回答

score 3 · Accepted Answer

总的来说，我尽量不为 IE 制作单独的 CSS 文件。如果需要，我将使用条件格式来专门针对它。总的来说，您最多可能需要做一个仅 IE 的样式表才能使其工作。

请确保您使用适合您的受众的正确版本的 IE 进行测试，因为 IE 6、7 和 8 非常普遍。

score 3 · Accepted Answer

作为最后的手段，当调整 CSS 并不能解决问题时，我喜欢使用Rafael Lima 的 CSS 选择器脚本。虽然它依赖于 JavaScript（我构建的大多数网站都是这样做的），但它提供了一种方便的方法来调整不同浏览器和版本的 CSS，而无需单独的样式表。

你可以有：

.someClass {
  margin-left:1px
}

.ie6.someclass {
  margin-left:2px
}

score 3 · Accepted Answer

3

<script>
  if (internetExplorer) {
    window.location = "http://getfirefox.com";
 }
 </script>

于 2009-05-29T19:17:36.363 回答

score 3 · Accepted Answer

3

使标记尽可能简单。做些小改动。测试每一个变化。

于 2009-05-29T19:30:45.807 回答

score 3 · Accepted Answer

3

我删除它

于 2009-05-29T19:35:04.470 回答

score 3 · Accepted Answer

我认为开发一个用于 IE 的新 CSS 文件会比重写您的应用程序要容易得多，但我不知道您的应用程序有多大的规模和范围，这甚至会使这样做成为一个相当大的选择。我想这可能取决于您希望支持的 IE 版本。

我们现在已经到了大多数用户应该已经完全迁移出 IE6 的地步了。IE7 仍然很麻烦，但远没有 6 那样糟糕。对于我的项目，我出售的默认设置是 IE7 与代码的兼容性，以指导 IE6 及以下用户进行升级。如果客户希望我将 IE6 兼容性整合到网站中，我通常会将报价提高 50%，因为支持浏览器是一件多么令人头疼的事情，而且必须编写多少额外的可视化代码才能使其正常工作。

score 3 · Accepted Answer

我知道这可能属于“太少、太晚”的类别。也就是说，我将投资于 VMWare 或 Parallels，并创建一个带有 IE6 的 Windows VM。

随着您的开发，您应该在您关心的浏览器中逐步检查您的进度。

也就是说，对于现有的应用程序，我首先要确保我的 HTML 是有效的（有多种验证服务可供您使用）然后，根据布局，我逐节尝试让布局正确，使用评论来“隐藏”您没有积极处理的部分。

score 1 · Accepted Answer

我通常会尽我所能避免创建单独的 CSS 文件。有很多 CSS 和 HTML 技巧和提示可以让您在 IE6 及更高版本以及所有其他常见浏览器中工作。只是需要时间来弄清楚这一切。不幸的是，有时使用复杂的布局可能会花费很多时间，尤其是当您不进行测试时。

score 1 · Accepted Answer

我让别人为我解决问题。我使用 Yahoo 优秀的 CSS 文件，这些文件包含在他们的 YUI 库中。他们有一个文件来删除现有标签的现有格式（例如，IE 中的 H1 看起来不像 Firefox 中的 H1），他们有另一个文件可以为我提供一组默认格式，在浏览器中看起来确实相同，他们还有另一个要标准化字体大小，其中最重要的是它们的网格文件。它使我能够非常快速轻松地在页面上构建区域和子区域的分层格式，并且我知道它可以在任何主要的现代浏览器上运行（雅虎对其进行了测试以确保它确实有效）。

它可能不是完美的解决方案，但对于我的需求来说已经绰绰有余了。

score 1 · Accepted Answer

我在我的开发中遇到了同样的问题：IE6，FFetc + LAMP + 自定义 MVC，基于 Rasmus Lerdorf 的文章，当时他建议使用 noMVC 类处理它，使用包含页眉、页脚和排序。我编写了 CSS 代码，被 FF 卡住了，不能很好地渲染它。我不得不去修改我的 CSS 知识——我发现单个 CSS 实现可以在 std.xml 中正确呈现。兼容模式（FF）和IE6。我喜欢那个。我很高兴使用单个 CSS 文件处理任何更改。我的建议：

我知道你有一台 Mac，去旧货出售（报纸会告诉你它们在哪里），花 10 美元买一台旧电脑（到目前为止我已经找到了很多）。这将使您有机会尽早测试 IE6，同时您还可以获得 KVM 切换器，以便在需要时访问机器。
我沉迷其中的一件事是 IE6 的设置 - 禁用所有 ActiveX 脚本 - 无论如何，在没有广告的情况下浏览网页会变得非常棒 - 测试你的应用程序是否有 ActiveX 设置，看看你的网站表现如何。这确实为我节省了我上面提到的几个小时的“痛苦”时刻。
你知道如何在有和没有脚本的情况下测试 FF/Opera/Safari
最后 - 无论您的网站使用多繁重的 Javascript，请确保没有编写核心功能（我相信您有很多）可以正确加载。

我不是专家，但希望我的评论对您有所帮助。

Cheery-O

score 1 · Accepted Answer

我确保我的网站在 ie9 中本地和完美地运行，并在 ie8 中运行（可能缺少功能）。我提示所有使用旧版本的人获取镀铬框架。我从不把时间浪费在 ie7 和更老版本上，因为使用 6 岁的浏览器是可悲的，不应该被鼓励。

score 0 · Accepted Answer

正如 nosredna 所说，使用有效的 doctype（请参阅http://www.alistapart.com/articles/doctype/ ）然后在 w3c 验证器（ http://validator.w3.org/ ）中检查您的网站。如果它没有显示错误（或只有几个），那么 IE 应该正确呈现它。

我不会花太多精力让它与 IE6 兼容，而只是接受网站在各种浏览器中看起来可能不同的事实。

html - 你如何处理 Internet Explorer？

我的问题：

我的问题：

编辑：

20 回答 20

Related

Reference