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也使用它。

Answer 1

您是否指定了有效的doctype？通过将Internet Explorer切换到标准模式，可以使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，屏幕的中间五分之一或更多被一堆乱码标记所占据，这些标记呈现为文本。

Answer 2

Conditional comments.

<!--[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，然后根据需要覆盖样式。

Answer 3

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

大多数情况下，CSS问题都有办法不需要加载特定于浏览器的样式表，因此我尝试尽可能使用这些解决方案。例如 - 如果您的大多数问题都与盒子模型问题有关，那么使用嵌套div替代填充等内容可以帮助确保所有内容看起来都正确，而不需要为不同的浏览器使用单独的样式表和模板。

Answer 4

浏览器重置启动。尽可能平衡比赛场地并取消浏览器默认设置。从头开始构建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-transparency-issues/）。

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

使用debug.css突出显示或概述div和其他元素。如果在开发期间需要，请将其放入HTML头部。这可能是一个巨大的帮助。

使用“开发者工具栏”（IE，Firefox）。

预计IE将成为痛苦，并在6,7和8中进行测试。

玩得开心！

Answer 5

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

使用reset.css - Yahoo! YUI Reset或Eric Meyer's Reset CSS
小心浮动，清除 - 它们通常会引起很多诅咒。
请注意IE中的hasLayout错误，通常添加缩放：1或高度属性有助于解决此问题。阅读On Having Layout。
让布局在Firefox，Safari，Chrome等中运行，同时保持IE的80％左右。
如果需要，使用条件注释实现IE6.css样式和IE7.css样式。
啤酒，白酒或其他成人饮料。

Answer 6

首先，阅读On Having Layout，它解释了IE渲染引擎如何在内部工作。 IE的渲染引擎来自CSS之前。它没有像你期望的那样正确区分内联和块元素。相反，在IE中一个元素hasLayout。或不。这是99％的IE CSS漏洞的来源。所以，阅读那篇文章几次。

至于修正，我通常使用条件评论。有几个原因：

与CSS黑客相比，它们是未来的证据。如果IE9修复了黑客而不是你用它来解决的错误怎么办？
它是有效的（X）HTML（条件评论只是对其他人的简单评论）
它不需要javascript。你会惊讶地发现有多少人关闭了javascript。

关于条件评论的一句话：永远不要使用开放式比赛。也就是说，永远不要做类似的事情：

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

原因和黑客一样：让它成为未来的证明。如果IE的下一个版本修复了该错误并且您不再需要修复该怎么办？或者更糟糕的是，“修复”现在实际上会在新的IE版本中弄乱你的布局？通常最好假设IE的下一个版本修复了您正在解决的错误。当IE 8出现时，我已经written a little bit了。

Answer 7

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

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

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

Answer 8

对于IE getting around 65% of the traffic，我认为你不能认为它是一种思想。

Answer 9

总的来说，我尝试尽可能多地做，而不为IE制作单独的CSS文件。如果需要，我将使用条件格式来专门定位它。总的来说，最多你可能只需要一个IE浏览器样式表来使它工作。

请确保您正在为您的受众测试适当版本的IE，因为IE 6,7和8非常普通。

Answer 10

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

在开发过程中，您应该逐步检查您关注的浏览器中的进度。

那就是说，对于现有的应用程序，我首先要确保我的HTML是有效的（有各种各样的验证服务可供您使用）然后，根据布局，我逐段尝试获取布局权利，使用注释“隐藏”您没有积极处理的部分。

Answer 11

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

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

Answer 12

我将其删除

Answer 13

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

Answer 14

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

Answer 15

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

你可以：

.someClass {
  margin-left:1px
}

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

Answer 16

我通常尽我所能避免创建单独的CSS文件。有很多CSS＆amp; HTML技巧＆amp;那里的提示应该允许你使它在IE6＆amp;以及其他所有常见的浏览器。只需要时间来弄清楚这一切。不幸的是，有时复杂的布局可能需要花费很多时间，尤其是当你不按照它进行测试时。

Answer 17

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

这可能不是一个完美的解决方案，但它已经足以满足我的需求。

Answer 18

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

我知道你有一台Mac，去车库买卖（报纸会告诉你它们在哪里），以10美元买一台旧PC（到目前为止我已经找到了很多）。这将为您提供一个早期测试IE6的机会，同时您可以在需要时使用KVM切换器来访问机器。
我已经沉迷于其中的一件事是IE6的设置 - 禁用所有ActiveX脚本 - 无需广告即可浏览网页 - 无论如何 - 用＆amp;测试你的应用程序没有activeX设置，看看你的网站有多好。这实际上节省了我之前提到的几个小时的“痛苦”时刻。
您非常了解如何使用＆amp; without scripting
最后 - 无论Javascripting您的网站使用多么繁重，请确保没有脚本化核心功能（我相信你有很多）正确加载。

我不是专家，但我希望我的评论会帮助你。

爽快-O

Answer 19

我确保我的网站在ie9中本地完美地工作，并在ie8中工作（可能缺少功能）。我提示使用旧版本的每个人获取chrome框架。我从不浪费时间在7岁以上，因为使用6岁的浏览器是可悲的，不应该鼓励。

Answer 20

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

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

你如何处理Internet Explorer？

我的问题：

我的问题：

编辑：

20 个答案: