html - 使 CSS 在所有浏览器中呈现相同的最简单或最快的方法是什么

Question

在当今所有主要浏览器中正确显示网页是一项非常耗时的任务。

有没有一种简单的方法来制作在每个浏览器中看起来都相同的 CSS 样式？或者至少你有一些技巧可以让这项工作更容易吗？

score 33 · Accepted Answer

我同意所有“重置”建议和“网格”框架建议，但我确实想补充一点建议：实际上，每个浏览器的相同目标是无法实现的，因为您无法控制客户端。例子：字体。

您在 CSS 中声明您的字体样式，但某些 Linux 机器、某些 Mac、某些移动浏览器 - 将没有您指定的字体。这种变化导致不同的文本长度和换行。然后是浏览器版本和运行每个操作系统的差异；不同的浏览器如何实现缩放功能；最终用户可以调整文本大小。相同的渲染只是一个无法实现的目标。

但请放心！这是 CSS 的“艺术”部分：能够灵活地设计，以便优雅地处理浏览器、操作系统和最终用户调整之间的差异。不要追求相同的渲染——你应该争取品牌一致性+适当的体验+灵活性。

score 12 · Accepted Answer

尝试使用eric meyer reset或YUI reset之类的 css 重置。将有所帮助，但没有简单或完美的方法可以使每个浏览器中的东西看起来都一样

score 9 · Accepted Answer

按照以下方式组织您的工作流程，它将减少大量时间浪费。

确保声明一个 doc-type。
使用其他人在此处提到的重置方法之一。
在你的结构上工作
尽可能避免在同一元素上使用宽度和填充。
始终考虑减少不需要的 HTML 和 css，而不是一直添加。
浮动元素时尽量不要使用左右边距。

如果你坚持这些项目，很多最常见的问题都不会出现。

PS 我忘记提到的一项是在 W3 上使用验证器。

score 7 · Accepted Answer

我总是创建一个基本的 CSS 样式表，它可以在 W3C 完全兼容的浏览器（如 firefox）中工作，然后创建替代浏览器特定的样式表来修复其他浏览器（即 IE6、IE7 等）中的任何样式问题。

您可以在 HTML 中使用以下代码来选择适当的 IE 样式表。

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

您还可以使用 browsershots 等在线网站在不同的浏览器中查看您的网站。

score 6 · Accepted Answer

一开始很费时间，尤其是当你还在学习 DIV+CSS 的时候。然而，当你做了足够多的练习，遇到了足够多的问题并解决了它们之后，你就会知道什么是可行的，什么是不可行的。

然后您就知道如何编写最兼容的样式，从而节省调试时间，并且很少遇到任何主要现代浏览器的问题：IE6、IE7、FF2、FF3、Opera 9、Safari 3 赢/Mac。

是的，这是可能的，并且尽可能简单。一个一个地练习和征服它们，然后您就知道如何在第一次尝试中正确地做事。

好吧，我猜唯一令人费解的怪物应该是IE6。是浏览器。除此之外，ff2、ff3、opera 9、safari win/mac、ie7、ie8在渲染引擎上都比较相似，至少bug比IE6少很多。

我为您（刚刚开始 CSS 之旅的人）提供了一些编码以获得最大 CSS 兼容性的最佳实践：

首先使用重置。它让您头脑清醒，并确保您工作的每一步。
不要在同一个元素上使用填充（左右）和宽度，除非你很清楚它是如何工作的。
如果一个元素是浮动的，如果父元素还没有高度，则给它的父元素overflow:hidden 和 height: 1% 。
不要同时给元素margin-top 或margin-bottom，而只给元素margin-top 或margin-bottom。因为相邻元素的边距相互折叠，使得定位对于新手来说有些不可预测。
如果一个元素是浮动的，给它display:inline。
除非您的脚本需要它，否则不要依赖 z-index 。
如果在 IE6 中发生任何奇怪的事情，请在该元素上使用height:1% 。

根据我的经验，这些东西真的会真正帮助你解决潜在的问题。使用它们，它们可以将您遇到任何耗时问题的机会减少80%。实际上，在处理特定标签时，还有比这些更琐碎的技巧，但让我们收工。

score 4 · Accepted Answer

4

雅虎 CSS 基金会将提供帮助。要标准化格式，您将需要重置和基础。

于 2008-09-17T16:15:39.573 回答

score 4 · Accepted Answer

首先，您可以尝试重置，就像这里提到的其他人一样，您可以使用这段 css 进行快速边距和填充重置：

*{margin: 0; padding: 0}

当你设计你的 css 时，确保你使用的是现代的、符合标准的浏览器（我个人推荐 firefox 3，它有一个优秀的web 开发工具栏，你可以在浏览器中编辑 css）。这样做肯定会使您的网站在所有新浏览器中看起来都不错。

您遇到的大多数布局问题可能是由 Internet Explorer 对框模型的错误解释引起的，您可以通过从不同时设置宽度和边距或填充来避免这种情况。这可能看起来很烦人，但事实并非如此，只需将填充或边距应用于设置了宽度的元素内部的内容。

当然存在更多问题，但这可能是最常见和最烦人的问题，对于更具体的问题，您可以随时尝试 google。此外，最近我正在考虑忽略 IE6 和旧版浏览器，如果我的网站的观众允许的话，在网页设计网站上你永远找不到任何人使用 IE6，对吧？当然，这通常是不可能的，因为很多（疯狂的；））人仍在使用 IE6。

此外，如果您需要测试您的网站，browsershots是一种快速的免费方式。

score 4 · Accepted Answer

确保包含正确的 DOCTYPE。

我仍然看到人们经常处理盒子模型问题，因为他们忘记了包含文档类型。如果没有正确的文档类型，Internet Explorer 会以“怪癖模式”呈现，其他浏览器也会在较小程度上呈现。如果您包含正确的文档类型，浏览器会切换到“标准模式”并且表现得非常相似。

除此之外，如果你以此为生，你会很快学会并记住那些微妙的角落案例，其中 IE 解释的东西与 Firefox 等略有不同。有了一些经验，完全有可能在你最喜欢的浏览器中设计整个页面，并且只需对 CSS 进行非常微小的调整，使其在其他浏览器中呈现几乎像素完美。

score 2 · Accepted Answer

随时在所有浏览器上测试您的 CSS。在你的宠物浏览器中让它像素完美却发现它在其他浏览器中的方式很糟糕。

采用这种方法将使您更容易理解在所有主要浏览器上的工作原理。

score 2 · Accepted Answer

我已经成功使用此处提供的 Eric Meyer CSS 重置。它基本上覆盖了一堆默认的浏览器 CSS 样式。话虽如此，仍然存在很多差异（可能是一些让您感到困扰的差异，例如盒子模型差异等。在这种情况下，使用Blueprint处理您的大部分 css 可能会更好。

score 2 · Accepted Answer

使用 CSS 重置将为所有内容提供相同的起点，但对于超出该起点所做的更改无济于事。我不能说真的有任何简单的方法。一种解决方案是坚持使用一组有限的 CSS，您知道这些 CSS 在您想要支持的所有浏览器中都能正常工作。你可能不能做很多更花哨的 CSS 东西，但是你的 CSS 调试时间应该会大大减少。

score 2 · Accepted Answer

您还可以查看 CSS 框架，例如Blueprint或css-boilerplate或yui 网格框架。通常，这些框架为您设置了一组标准的 css 类定义，您可以将其应用于元素以特定和定义的方式布置它们。

score 2 · Accepted Answer

如果它需要像素完美，那么您需要在样式表中使用 px 。使用css 重置样式表，然后根据像素调整所有内容的大小。

为了确保您的 css 在不同的浏览器中正确呈现，您可能会发现BrowserShots之类的服务很有用，但是，我认为您会发现很难在所有浏览器中获得绝对一致性。

我个人的偏好是使用正确的标记和 css，忽略任何浏览器黑客，并设计布局以优雅地降级。

score 2 · Accepted Answer

遵守严格的文档类型也会处理许多差异。另外，我通常会添加一个 <div> 标签来封装正文中的所有内容，因为我注意到 firefox 与 ie 将正文标签作为顶级元素处理的方式有所不同。

score 2 · Accepted Answer

我喜欢首先针对 Firefox 进行开发，通常使用 Yahoo 的 YUI 进行重置（以及使用网格来设置页面的基本结构），并使用 IE 条件指令来覆盖 IE 以不同方式处理的格式。

索引.html

<head> <link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/base-min.css" /> <link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/grids.css" /> <link rel="stylesheet" type="text/css" media="all" href="styles/screen.foo.css" /> <link rel="stylesheet" type="text/css" media="print" href="styles/print.foo.css" />

 </head>

score 2 · Accepted Answer

首先为 Firefox 开发。您可以在其他浏览器中进行测试，但不必担心修复，直到它在 Firefox 中按您想要的方式工作。然后转到其他基于标准的浏览器，即 Safari 和 Opera。如果您编写了良好的 HTML 和 CSS，那么在这些浏览器中应该不需要太多工作。

然后继续讨论 IE。使用条件注释来定位特定的 IE 版本。IE 7 应该相当简单，对于 IE 6，您可能会发现您必须牺牲设计的某些部分才能使其轻松工作。没关系，IE 6 即将推出，所以如果您不完全支持它，请不要担心。透明 PNG 通常是最大的问题，AlphaImageLoader 并不是在所有情况下都能解决问题。

如前所述，像 Eric Meyer 的 CSS 重置是一个很好的起点，使用它来根据您的需要构建自己的重置。除此之外，答案很简单：没有灵丹妙药。

score 2 · Accepted Answer

网站是否需要在每个浏览器中看起来都完全相同？

除此之外，我想熟能生巧。并阅读有关您可能偶然发现的潜在问题的所有信息。使用重置文件、正确的文档类型、验证器和框架可能会在一定程度上帮助您，但最终您可以控制代码，只有您确切知道您希望它看起来像什么。该代码可能是有效的，并且浏览器可能会完全按照您的要求执行，但它看起来仍然不像您想要的那样。

您使用 CSS 进行布局的次数越多，您遇到的问题就越多，您找到的解决方法就越多，您学到的东西就越多。在完全使用结构化、语义化的 HTML 和整洁的 CSS 制作布局几年之后，我很少需要花费大量时间来纠正一个或另一个浏览器中的缺陷。

score 2 · Accepted Answer

使用重置代码段
使用 Web 标准进行开发
验证您的标记和 CSS
不要在元素的相同部分使用边距和内边距
使用 IE 条件句
在您想要支持的所有浏览器中进行测试
明白没有什么是完美的，但你可以非常接近。

score 0 · Accepted Answer

雅虎用户界面( YUI) 有一个CSS 重置实现，旨在在所有浏览器中形成一个通用基线。这应该让你非常接近。

score 0 · Accepted Answer

这确实是一个很难回答的问题——所有浏览器？这是否意味着所有版本？移动浏览器？只是“主线”（opera、firefox、ie 和 safari）？

您甚至不会发现完全符合 CSS 级别 1 的内容，因此您将不得不进行一些调整。以我的经验，opera、firefox 和 safari 在涉及基本内容（定位、浮动、div 等）时都表现相似，而您必须针对 IE 进行调整。

您还可以使用经过测试的 CSS 库或框架，如 yahoo 网格 ( http://developer.yahoo.com/yui/grids/ ) 或谷歌的网络工具包 ( http://code.google.com/webtoolkit/等编程接口）。

score 0 · Accepted Answer

如果我使用浮动将页面布局在框中，我倾向于发现外观相同的 CSS。流模型按照您的想法工作，并且它们在所有主要浏览器中都忠实呈现。我知道有些人会告诉我使用大量浮点数是错误的，但它的效果出奇的好。

score 0 · Accepted Answer

在基础上，不能保证这样的事情会完美地工作。只要浏览器开发人员找到做自己的事情的方法而不是“标准”的做事方式，就会有差异。

我使用Yahoo User Interface Base CSS取得了积极的成果，但最终即使这样也无法应对 CSS 应该可以实现的更复杂的项目。

最后，我找到了一个不太完美的解决方案，只是让我的框架检查我是否设置了特定于浏览器的样式表。

这是一个 PHP 片段来说明。很抱歉针对特定语言的解决方案，但我想这个想法很清楚，可以用不同的语言实现：

$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sStyle."\" />\n";
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension))
  $sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension."\" />\n";
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension))
  $sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension."\" />\n";

由于没有丢失文件、没有无法识别的标签或其他可能阻塞某些浏览器的代码，框架中的页面按照我们希望它们在客户请求的所有浏览器中呈现的方式呈现。更重要的是，它们这样做不会产生错误（即 FireFox 中的一个空的错误控制台），这使您在实际遇到错误时进行调试变得容易得多。

score 0 · Accepted Answer

我建议看一下Blueprint和960 Grid System。

除了为 Internet Explorer 进行重置和包含 CSS 修复之外，它们都可以让您轻松使用设计网格，从而在构建基于 CSS 的布局时处理大量繁琐的调整。

score 0 · Accepted Answer

我通常针对W3C CSS 验证器进行开发，然后在各自的浏览器中验证我希望它们的样子。验证对一致的行为大有帮助。

有时我会将页面剥离为仅在我所针对的主要浏览器中验证和正确显示的样式，有时我会通过其他海报提到的特定于浏览器的调整来补充它。

score 0 · Accepted Answer

css 框架当然有帮助，尽管它们很容易因为一堆你不需要或不使用的样式而变得沉重。

查看使用条件注释定位 IE 并在 Position 上仅使用一个样式表，这是一种在不使用 CSS hack 的情况下提供 IE 版本特定样式的好方法；这允许您通过选择器而不是浏览器将样式规则保持在一起。

score 0 · Accepted Answer

你问错了问题，因为这是回答这个问题的唯一方法：

<!DOCTYPE html>
<html>
<head>
  <style>* { background: #fff }</style>
</head>
<body></body>
</html>

没有太多的答案，是吗？:)

其他人都在这里——让你的 CSS在每个浏览器中都能工作，不要试图让它看起来一样。你不能。

score -1 · Accepted Answer

-1

应用设计锡箔帽

CSS：

*{display:none}

于 2008-10-17T00:25:30.190 回答

html - 使 CSS 在所有浏览器中呈现相同的最简单或最快的方法是什么

27 回答 27

Related

Reference