html - Firefox vs IE vs Chrome vs Safari

Question

目前我正在设计一个网站，我发现很难在所有浏览器上完美地显示该网站。

有什么规则、建议等可以遵循吗？

谢谢

score 26 · Accepted Answer

开发标准，然后添加例外

目前，最流行的最兼容浏览器是 Firefox，因此开发到 Firefox 是很自然的第一步。使用W3C的验证器来确保您走上正轨。一旦你的页面大部分完成，验证它在 Safari 和 Chrome（也是高度兼容的浏览器，所以你不应该有太多麻烦）中仍然看起来不错，然后开始为 IE（6和7）修复它。相信我，它需要修复！在添加例外时，QuirksMode之类的网站可以提供很大帮助。

始终使用 HTML 4.01 Strict DOCTYPE

这可能是这里比较有争议的观点之一，因为 XHTML 有很多支持者。不幸的是，以既兼容 IE 又兼容标准的方式提供 XHTML 文件是不可能的——IE 无法识别 XHTML MIME 类型，并且将它们作为text/html. 只有 HTML 4.01 Strict DOCTYPE 将所有浏览器置于（接近）标准模式，同时仍符合标准。有关更多信息，请查看DOCTYPE 切换。如果您绝对不能不编写格式良好的 XML 页面，请使用XSL 转换将您的页面从您选择的 XML 风格转换为 HTML。

不要使用 CSS “hacks”

有时它们可能非常诱人，但黑客攻击是基于浏览器错误的副作用。因此，很难预测未来的浏览器将如何对它们做出反应。另一方面，条件注释是 IE 浏览器的有意功能，因此可以安全使用。事实上，它们是一种很好的方式，可以将特定于 IE 的（通常是非验证的）CSS 排除在有效样式表之外。

不要创建像素对齐的布局

试图让所有浏览器对齐，精确到像素是一种挫败感（而且通常是徒劳的）。尝试创建在被破坏时仍然看起来不错的布局，因为它更容易修复两个左侧边框之间的错位，而不是页面两侧的左侧和右侧！使用具有内置边框的背景图像应该是一个很大的警告标志！

不要对字体使用绝对大小

并非每个人都使用与您相同尺寸的显示器；而不是将脚注设置为font-size: 10px;，而是将其设置为font-size: smaller;或font-size: 80%;。这是一个很大的可访问性问题。

不要依赖 CSS 属性的默认值

您永远不知道是否所有浏览器都使用相同的默认值。 YUI 的“重置”样式表是一个很好的起点。

score 23 · Accepted Answer

让一个网站在所有浏览器和平台上看起来完全一样几乎是不可能的。第一个原因是字体在 Windows、Mac、Linux、Solaris 等上的呈现方式不同。

我们遵循一个新想法：网站不必在不同的浏览器和平台上看起来完全相同。你可以很容易地把它带到那里的 96-98%。其余的将花费你过多的努力来获得潜在的收益。

我们开始开发 Firefox。如果我们做对了，其余的浏览器就非常接近了。大多数时候，IE 是真正棘手的问题。我建议您告诉您的客户或您自己，IE 6 不再是真正的要求。

确保您从正确的开始，使用“重置”css 样式表，将所有浏览器输出放在共同点上。查看：http: //developer.yahoo.com/yui/reset/

最后，为自己省去一些麻烦，并在 ExtJS 或 JQuery 或 Prototype 之类的 Javascript 库上进行标准化，这将隐藏浏览器的差异，让您专注于项目的代码。

score 12 · Accepted Answer

确保您的 XHTML 和 CSS 有效。
仅使用标准 Javascript。
在一种主要（非 IE）浏览器中进行测试：我的建议是 Firefox 或 Chrome。
您的网站现在应该在主要（非 IE）浏览器中看起来非常接近
测试dillo或lynx（或两者）之类的东西
最后，开始做一些技巧来让 IE 工作

score 10 · Accepted Answer

查看浏览器截图。它使用各种浏览器对您的站点进行屏幕截图，因此您可以直观地检查它。这有点慢，但对我有用。

score 5 · Accepted Answer

这是我不久前给出的关于在浏览器中完善网站的答案（来自这里）

实际上，您在开发 Web 应用程序时需要使用的是：

火狐
IE
苹果浏览器
（Chrome 很快...）

我的意思是，您应该在所有 3 个主要的 A 级浏览器上测试您网站的每一步……因此，如果在此过程中出现问题，您将确切知道是什么导致了中断。

如果您不定期与浏览器一起检查您的页面是如何运行的，那么以后解决问题将变得更加困难。

score 4 · Accepted Answer

很多开发者喜欢从 FireFox 开始测试，然后转到 IE7。这样他们就拥有了最流行的浏览器。

我喜欢从 IE7 开始而不是去 FireFox，因为 Firefox 有这个 FireBug，它可以让我看到问题所在并进行更正。但我不得不说，我正在慢慢改变以使用 FireFox 拳头进行测试，因为它确实更尊重所有规则。（顺便说一句，FireBug 可以在 IE 的 Javascript 中使用，所以它很棒）。

当然，你应该看看谁是你的公众。如果它是公司内部使用的并且他们只使用 IE ......选择很简单。如果它更适合开发人员，那么您将拥有更多使用 FireFox 的用户......您可能需要首先根据您的受众进行测试。

但是，不要试图让它在所有浏览器上看起来都很完美，你会白白浪费时间。只需确保一切正常并且所有 javascript 操作都正确完成。

score 4 · Accepted Answer

我建议确定您的目标受众，然后确定他们使用的浏览器。完成此操作后，请在该浏览器中追求完美。现在，您可以做一些工作，让它看起来适合其他浏览器。

今天在所有浏览器中追求完美就像要求世界和平一样。

您可以采取的另一种方法是使用像 jQuery 这样的 Javascript 框架来减轻痛苦。

score 3 · Accepted Answer

不要试图让每个浏览器都像其他浏览器一样完美地显示它......只有你会知道！试着让它在每个浏览器上看起来都很好。

score 3 · Accepted Answer

你永远不会得到完美，去争取你能得到的最好的。
通常，最好的选择是使用适用于所有浏览器的 css 子集，而不是使用特定于浏览器的 hack。
对于 javascript，请务必使用 javascript 框架（JQuery / Prototype / YUI / Ext / 等），并将其专门用于 dom 引用/操作。很难把这些东西做好，他们已经为你做了很多工作
很好的参考网站

score 3 · Accepted Answer

我发现使用更多的 CSS 而不是表格可以更容易地在所有浏览器上获得相同的效果。它仍然有点棘手，但表格布局逻辑更糟。谨慎使用表格。

哦，让事情变得“有弹性”总是一个问题。固定宽度/高度更容易。

score 3 · Accepted Answer

使用严格的文档类型。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

如果您使用的是 ASP.NET，那么您应该添加/更改这是您的 web.config。

<system.web>
    <xhtmlConformance mode="Strict"/>

您还应该检查符合 css 的适配器。http://www.asp.net/cssadapters/

我花了几个小时让我的网站在所有浏览器中显示相同，这似乎有效。最后一个建议。经常检查：在检查之前不要做太多，以确保所有浏览器显示相同。

score 2 · Accepted Answer

为 Firefox 开发。然后应用特定于 IE 的修复程序。希望它能在 Chrome 和 Safari 中正常显示。

原因是有一些修复可以让 IE '正常'工作，但没有很多修复可以让 Firefox 表现不佳。

哦，买一份Transcending CSS。

score 2 · Accepted Answer

我的方法是为 firefox、opera 和其他非 Microsoft 浏览器编写代码。一旦它在其中工作，我在单独的样式表/js 文件中修补 IE 功能。

此外，我通常使用 JS 库和 CSS 框架。10 次中有 9 次我使用 Jquery 和 YUI Grids。

score 1 · Accepted Answer

使用 JS 库，例如 ExtJS。这将样式化的特定于浏览器的方面抽象出来。

只要清晰易读，在不同的浏览器中看起来不一样，这是错误的吗？

score 1 · Accepted Answer

使用 CSSViewer Extension for firefox，它可以帮助您查看可以对代码进行的一些非常用户友好的修复。使用 CSS display:block 或 display:inline-block 属性，它们非常有用。边距、内边距、高度和宽度将是您的朋友，有时您需要指定这些值才能在许多浏览器上看到相同的内容。对于字体，我建议你阅读 yahoo yui fonts css 的东西。

score 1 · Accepted Answer

好的，最好的方法是使用库和预先编写的代码。例如：永远不要使用 JavaScript，而是使用 JQuery，因为它与所有浏览器兼容，而不是编写自己的主题，而是使用免费的 css 主题。

好吧，它对我有用，可以帮助我节省大量时间。因为在专业市场上，时间就是金钱。

谢谢。

score 0 · Accepted Answer

使用严格的文档类型、有效的 xhtml/html 和有效的 CSS 是很好的起点。另外，请确保使用 reset/undo.css。

尽管如此，还是会有捕获量，但很少

score 0 · Accepted Answer

我首先在 FF 等中检查网站，然后“修复”该网站以在 IE 中看起来正常。大多数情况下，如果代码经过验证且干净简单，IE 只需要少量的小编辑。我对 IE 使用不同的样式表。我不建议使用 hacks。对于 javascript，只使用一个库。是的，browsershots 帮助很大。

score 0 · Accepted Answer

IE7 也不再是必需品。现在，它的安全性令人不安。IE8 应该支持其他浏览器所做的大部分工作，而它不支持的部分则无关紧要。体验会变差，但是如果你一开始用的是IE，反正你是没有品味的。