使 CSS 在所有浏览器中呈现相同的最简单或最快的方法是什么
https://stackoverflow.com/questions/84912
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
使网页在当今所有主要浏览器中正确显示是一项非常耗时的任务。
有没有一种简单的方法可以使 CSS 样式在每个浏览器中看起来都相同？或者至少你有一些技巧可以让这项工作变得更容易吗？
解决方案
我同意所有“重置”建议和“网格”框架建议，但我确实想添加一些建议：目标是 每个浏览器中都相同 实际上，这是不可能实现的，因为你无法控制客户。例证：字体。
您在 CSS 中声明字体样式，但某些 Linux 计算机、某些 Mac、某些移动浏览器 - 不会具有您指定的字体。这种变化导致不同的文本长度和换行。然后是浏览器版本和运行的操作系统的差异；不同浏览器如何实现缩放功能；最终用户可以调整文本大小。相同的渲染根本就是一个无法实现的目标。
但请放心！这是 CSS 的“艺术”部分：能够灵活地设计，以便优雅地处理浏览器、操作系统和最终用户调整之间的差异。不要追求相同的渲染——你应该追求品牌一致性+适当的体验+灵活性。
其他提示
按照以下方式组织你的工作流程，它将减少大量时间浪费。
- 确保你 声明一个文档类型.
- 使用其他人在此处提到的重置方法之一。
- 致力于你的结构
- 避免使用宽度 和 尽可能在同一元素上进行填充。
- 始终考虑减少不需要的 HTML 和 css，而不是一直添加。
- 浮动元素时尽量不要使用左右边距。
如果您坚持执行这些项目，许多最常见的问题就不会出现。
PS 我忘记提及的一项是使用 W3 的验证器。
我总是创建一个基本的 CSS 样式表，它可以在 W3C 完全兼容的浏览器（如 Firefox）中工作，然后创建替代的浏览器特定样式表来修复其他浏览器中的任何样式问题，即IE6、IE7等
您可以在 HTML 中使用以下代码来选择适当的 IE 样式表。
<!--[if lte IE 6]>
<link href="/css/eqtr_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
您还可以使用在线网站，例如 浏览器截图 在不同的浏览器中查看您的网站。
一开始这很耗时，特别是如果您仍在学习 DIV+CSS 的诀窍的话。然而，当你做了足够多的练习、遇到了足够多的问题并解决了所有问题之后，你就会知道什么有效、什么无效。
然后您就知道如何首先编写尽可能兼容的样式，从而节省调试时间，并且在任何主要的现代浏览器中都很少出现任何问题：IE6、IE7、FF2、FF3、Opera 9、Safari 3 Win/Mac。
是的，这是可能的，而且非常容易。一个一个地练习并克服它们，然后你就知道如何在第一次尝试中把事情做好。
好吧，我猜唯一令人困惑的怪物应该是 IE6。这是浏览器内的。除此之外，ff2、ff3、opera 9、safari win/mac、ie7、ie8在渲染引擎上都比较相似，至少比IE6的bug少很多。
我为您（刚刚开始 CSS 之旅的人）提供了一些编码方面的最佳实践，以获得最大的 CSS 兼容性：
- 用一个 重置 第一的。它可以让你头脑清醒，确保你工作的每一步。
- 不要在同一元素上使用内边距（左和右）和宽度 除非你很清楚结果如何。
- 如果一个元素是浮动的，则给出它的父元素 溢出：隐藏和高度：1% 如果父母还没有身高。
- 不要给一个元素同时设置 margin-top 或 margin-bottom 但仅限于 margin-top 或 margin-bottom。因为相邻元素的边距会相互塌陷，使得新手的定位有些难以预测。
- 如果一个元素是浮动的，则给它 显示：内嵌.
- 不要依赖 z-index 除非你的脚本需要它。
- 如果 IE6 中发生任何奇怪的情况，请使用 高度：1% 在那个元素上。
根据我的经验，这些都是真正能帮助你解决潜在问题的事情。使用它们，它们可以消除您遇到任何耗时问题的机会 80%. 。实际上，在处理特定标签时，还有比这些更琐碎的技巧，但我们就到此为止吧。
这 雅虎 CSS 基础 会有帮助的。为了标准化格式，您需要重置和基础。
确保包含正确的 DOCTYPE。
我仍然看到人们经常处理盒模型问题，因为他们忘记包含文档类型。如果没有正确的文档类型，Internet Explorer 就会以“怪异模式”呈现，其他浏览器也会在较小程度上呈现这种情况。如果您包含正确的文档类型，浏览器将切换到“标准模式”并且行为彼此非常相似。
除此之外，如果你以此为生，你会很快学会并记住那些微妙的极端情况，其中 IE 解释的内容与 Firefox 等略有不同。凭借一些经验，完全可以在您最喜欢的浏览器中设计整个页面，并且只需对 CSS 进行非常小的调整，即可使其在其他浏览器中呈现几乎完美的像素。
首先，您可以尝试重置，就像这里提到的其他人一样，您可以使用这段 css 进行快速边距和填充重置：
*{margin: 0; padding: 0}
当您设计 css 时，请确保您使用的是现代的、符合标准的浏览器（我个人推荐 firefox 3，它具有出色的性能） Web 开发人员工具栏, ，您可以使用它在浏览器中编辑 css）。这样做肯定会让您的网站在所有新浏览器中看起来都不错。
您遇到的大多数布局问题可能是由 Internet Explorer 引起的 错误的解释 对于盒子模型，您可以通过永远不要同时设置宽度和边距或填充来避免这种情况。这可能看起来很烦人，但事实并非如此，只需将填充或边距应用于设置了宽度的元素内的内容即可。
当然还存在更多问题，但这可能是最常见和最烦人的问题，对于更具体的问题，您可以随时尝试谷歌。另外，最近我正在考虑忽略 IE6 和旧版浏览器，如果我的网站的受众允许的话，在网页设计网站上你永远不会找到任何人使用 IE6，对吧？当然，这通常是不可能的，因为许多（疯狂的;））人仍在使用 IE6。
另外，如果您需要测试您的网站 浏览器截图 是一种快速完成此操作的免费方法。
随时在所有浏览器上测试您的 CSS。在你的宠物浏览器中获得完美像素却发现在其他浏览器中相差甚远，这真是太糟糕了。
采用这种方法将使您轻松了解哪些内容适用于所有主要浏览器。
使用 CSS Reset 将为所有内容提供相同的起点，但不会对您在该起点之外所做的更改有太大帮助。我不能说有什么简单的方法。一个解决方案是坚持使用一组有限的 CSS，您知道这些 CSS 在您想要支持的所有浏览器中都能正常工作。您可能无法执行许多更高级的 CSS 操作，但您的 CSS 调试时间应该会大大减少。
遵守严格的文档类型也可以解决许多差异。另外，我通常添加一个 <div> 标签来封装 body 内的所有内容，因为我注意到 firefox 与 ie 将 body 标签作为顶级元素处理的方式有所不同。
我喜欢首先针对 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" />
<!--[if gt IE 5]> <link rel="stylesheet" type="text/css" href="styles/ie.screen.foo.css" /> <![endif]-->
</head>
首先针对 Firefox 进行开发。您可以在其他浏览器中进行测试，但不必担心修复问题，直到它在 Firefox 中按照您想要的方式工作为止。然后转向其他基于标准的浏览器，即 Safari 和 Opera。如果您编写了良好的 HTML 和 CSS，那么在这些浏览器中应该不需要做太多工作。
然后继续讨论最强大的东西，即 IE。使用条件注释来定位特定的 IE 版本。IE 7 应该相当简单，对于 IE 6，您可能会发现必须牺牲设计的某些部分才能使其轻松运行。没关系，IE 6 即将推出，所以如果您不完全支持它，请不要担心。透明 PNG 通常是最大的问题，AlphaImageLoader 并不能在所有情况下都能解决问题。
如前所述，像 Eric Meyer 这样的 CSS 重置是一个很好的起点，使用它根据您的需要构建您自己的重置。除此之外，答案很简单：没有灵丹妙药。
除此之外，我想熟能生巧。并阅读您能找到的有关您可能偶然发现的潜在问题的所有内容。使用重置文件、正确的文档类型、验证器和框架可能会在一定程度上帮助您，但最终 你 控制代码并且仅 你 确切地知道你想要它是什么样子。该代码可能是有效的，并且浏览器可能完全按照您的指示执行操作，但它看起来仍然不像您想要的那样。
你越多地使用 CSS 进行布局，你遇到的问题就越多，你找到解决方法的问题就越多，你学到的也就越多。经过多年完全使用结构化、语义 HTML 和整洁的 CSS 进行布局之后，我很少需要花费大量时间来纠正一个或另一个浏览器中的缺陷。
- 使用重置片段
- 使用 Web 标准进行开发
- 验证您的标记和 CSS
- 不要在元素的相同部分使用边距和填充
- 使用 IE 条件
- 在您想要支持的所有浏览器中进行测试
- 明白什么都不会发生 完美的, ，但你可以非常接近。
这确实是一个很难回答的问题——所有浏览器？这是否意味着所有版本？移动浏览器？只是“主线”（opera、firefox、ie 和 safari）吗？
您甚至找不到 CSS level 1 内容的完全合规性，因此您必须进行一些调整。根据我的经验，opera、firefox 和 safari 在基本内容（定位、浮动、div 等）方面的表现都相似，只是 IE 需要调整。
您还可以使用经过测试的 CSS 库或框架，例如 yahoo grids (http://developer.yahoo.com/yui/grids/）或像谷歌网络工具包这样的编程接口（http://code.google.com/webtoolkit/).
如果我使用浮动在框中布局页面，我往往会发现外观相同的 CSS。流模型按照您想象的方式工作，并且它们在所有主要浏览器中忠实呈现。我知道有些人会告诉我使用大量浮动是错误的，但它的效果却出奇的好。
从根本上来说，并不能保证这样的事情会完美地发挥作用。只要浏览器开发人员找到做自己的事情的方法而不是“标准”的做事方式，就会有差异。
我已经使用了积极的结果 雅虎用户界面基础 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 中的空错误控制台），这使得您在实际遇到错误时进行调试变得更加容易。
我通常会针对 W3C CSS 验证器, ，然后验证事情在各自的浏览器中看起来像我想要的那样。验证对于实现一致的行为大有帮助。
有时我会将页面精简为仅在我所针对的主要浏览器中验证和正确显示的样式，有时我会像其他发帖者提到的那样，使用特定于浏览器的调整来补充它。
CSS 框架当然有帮助，尽管它们很容易因为一堆你不需要或使用的样式而变得沉重。
查看使用条件注释和仅一个样式表来定位 IE 位置就是一切，这是一种无需使用 CSS hacks 即可提供特定于 IE 版本的样式的出色技术；这允许您通过选择器而不是浏览器将样式规则保持在一起。
您问了错误的问题，因为这是回答该问题的唯一方法：
<!DOCTYPE html>
<html>
<head>
<style>* { background: #fff }</style>
</head>
<body></body>
</html>
没有太多答案，是吗？:)
其他人都在这里 - 制作你的 CSS 工作 在每个浏览器中，不要试图做到这一点 看起来一样. 。你不能。
应用锡箔帽设计
CSS：
*{display:none}
