在今天所有主流浏览器中正确显示网页是一项非常耗时的任务。
是否有一种简单的方法可以使CSS样式在每个浏览器中看起来都相同？ 或者至少你有一些提示让这项工作更容易吗？
答案 0 :(得分：33)
我同意所有“重置”建议和“网格”框架建议，但我确实想添加一些建议：实际上，每个浏览器中相同的目标 ，无法实现，因为你无法控制客户。例证：字体。
您在CSS中声明了自己的字体样式，但某些Linux机器，某些Mac，某些移动浏览器 - 将不具有您指定的字体。这种变化导致不同的文本长度和包装。然后是每个运行浏览器版本和操作系统的差异;不同浏览器如何实现缩放功能;并且文本大小可以由最终用户调整。相同的渲染只是一个无法实现的目标。
但请记住！这是CSS的“艺术”部分：能够灵活设计，以便优雅地处理浏览器，操作系统和最终用户调整之间的差异。不要争取相同的渲染 - 你应该努力争取品牌一致性+适当的经验+灵活性。
答案 1 :(得分：12)
尝试使用eric meyer reset或YUI reset等css重置。将帮助但没有简单或完美的方式使每个浏览器看起来相同
答案 2 :(得分：9)
以下列方式组织您的工作流程，这将减少浪费大量时间。
如果坚持使用这些项目，很多最常见的问题都不会出现。
PS我忘了提到的一个项目是在W3上使用验证器。
答案 3 :(得分：7)
我总是创建一个基本的CSS样式表，它可以在W3C完全兼容的浏览器中工作，比如firefox，然后创建其他浏览器特定的样式表来修复其他浏览器中的任何样式问题，即IE6，IE7等。
您可以在HTML中使用以下代码来选择适当的IE样式表。
<!--[if lte IE 6]>
<link href="/css/eqtr_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
您还可以使用browsershots等在线网站在不同的浏览器中查看您的网站。
答案 4 :(得分：5)
一开始很费时间，特别是如果你还在学习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兼容性：
根据我的经验，这些是真正真正帮助您解决潜在问题的事情。使用它们可以消除因 80％而绊倒任何耗时问题的机会。实际上，在处理特定标签时，有比这些更简单的技巧，但让我们称之为一天。
答案 5 :(得分：4)
Yahoo css foundation会有所帮助。要标准化格式化，您需要重置和基础。
答案 6 :(得分：4)
确保包含正确的DOCTYPE。
我仍然看到人们经常处理盒子模型问题，因为他们忘了包含doctype。如果没有正确的doctype，则Internet Explorer会在“怪癖模式”下呈现，其他浏览器也会在较小程度上呈现。如果您包含正确的doctype，浏览器会切换到“标准模式”并且表现得非常相似。
除此之外，如果你这样做是为了谋生，你会迅速拿起并记住那些微妙的角落情况，其中IE解释与Firefox略有不同的东西等等。有了一些经验，完全有可能在你的设计整个页面最喜欢的浏览器，只对CSS进行非常小的调整，使其在其他浏览器中呈现几乎完美的像素。
答案 7 :(得分：4)
首先，您可以尝试重置，就像这里提到的其他人一样，您可以使用这段CSS进行快速边距和填充重置：
*{margin: 0; padding: 0}
当您设计自己的CSS时，请确保您使用的是符合标准的现代浏览器（我个人推荐使用firefox 3，它具有出色的web developer toolbar，您可以在浏览器中编辑css）。这样做肯定会使您的网站在所有新浏览器中都显得正常。
您所拥有的大多数布局问题可能都是由Internet Explorer的wrong interpretation框模型引起的，您可以通过永远不设置宽度和边距或填充来避免这种情况。这可能看起来很烦人，但事实并非如此，只需将填充或边距应用于元素内部的内容，该内容具有宽度设置。
当然存在更多问题，但这可能是最常见和最烦人的问题，对于您可以随时尝试谷歌的更具体问题。另外，最近我考虑忽略IE6和旧浏览器，如果我的网站的观众允许它，在网站设计网站上你永远不会找到使用IE6的人，对吧？当然，这是不可能的，因为许多（疯狂的）人仍在使用IE6。
此外，如果您需要测试您的网站browsershots是一种免费的快速方式。
答案 8 :(得分：2)
答案 9 :(得分：2)
Do websites need to look exactly the same in every browser?
除此之外，我猜练习很完美。并阅读有关您可能遇到的潜在问题的所有信息。使用重置文件，正确的文档类型，验证器和框架可能在某种程度上对您有所帮助，但最终您控制着代码并且只有您确切地知道什么你希望它看起来像。代码可能是有效的，浏览器可能完全按照您的说法执行，但它仍然看起来不像您想要的那样。
您使用CSS进行布局的次数越多，您遇到的问题就越多，您找到的问题就越多，您学到的就越多。经过几年的布局完全采用结构化，语义HTML和整洁的CSS，我很少花费大量时间来纠正一个或另一个浏览器中的缺陷。
答案 10 :(得分：2)
首先开发Firefox。您可以在其他浏览器中进行测试，但不要担心修复，直到它在Firefox中按照您的需要运行。然后转到其他基于标准的浏览器，即Safari和Opera。如果您已经编写了良好的HTML和CSS，那么在这些浏览器中不需要太多工作。
然后继续前往该地段的野兽，IE。使用条件注释来定位特定的IE版本。 IE 7应该相当容易，对于IE 6，您可能会发现必须牺牲设计的某些部分才能使其轻松工作。这没关系，IE 6即将推出，所以不要担心，如果你不完全支持它。透明的PNG通常是最大的问题，AlphaImageLoader在任何情况下都无法解决问题。
如前所述，像Eric Meyer这样的CSS重置是一个很好的起点，可以根据您的需要使用它来构建自己的重置。除此之外答案很简单：没有银弹。
答案 11 :(得分：2)
我喜欢首先针对Firefox进行开发，经常使用Yahoo的YUI进行重置（以及用于页面基本结构的网格），并使用IE条件指令覆盖IE中的所有格式 - a-hem -wisdom，处理方式不同。
<强>的index.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>
答案 12 :(得分：2)
遵守严格的doctype也会解决许多差异。另外，我通常会添加＆lt; div＆gt;标记包含在体内的所有内容，因为我注意到firefox与ie处理body标记作为顶级元素的区别。
答案 13 :(得分：2)
如果它需要像素完美，那么你需要在样式表中使用px。使用css reset stylesheet，然后根据像素调整大小。
为了确保您的css在不同的浏览器中正确呈现，您可能会发现BrowserShots这样的服务很有用，但是，我认为您会发现很难在所有浏览器中获得绝对一致性。
我个人的偏好是使用正确的标记和CSS，遗漏任何浏览器，并设计布局以优雅地降级。
答案 14 :(得分：2)
您还可以查看css的框架，例如Blueprint或css-boilerplate或yui grids框架。通常，这些框架为您设置了一组标准的css类定义，您可以将这些定义应用于元素，以便以特定和定义的方式进行布局。
答案 15 :(得分：2)
使用CSS重置将为所有内容提供相同的起点，但对于您在此起点之外所做的更改不会有太大帮助。我不能说有任何简单的方法。一种解决方案是坚持使用一组有限的CSS，您知道在您想要支持的所有浏览器中都能很好地使用它。你可能无法做很多更好的CSS东西，但你的CSS调试时间应该会大幅下降。
答案 16 :(得分：2)
我已成功使用Eric Meyer CSS重置here。它基本上覆盖了一堆默认的浏览器CSS样式。话虽如此，仍然存在许多差异（可能是一些令人困扰的问题，比如盒子模型差异等等。在这种情况下，使用Blueprint来处理大部分css可能会更好。
答案 17 :(得分：2)
随时随地在所有浏览器上测试CSS。在您的宠物浏览器中获得像素完美只是为了发现它在其他浏览器中已经过时了。
采用这种方法可以让您更好地理解所有主流浏览器的工作原理。
答案 18 :(得分：0)
我建议您查看Blueprint和960 Grid System。
除了进行重置并包含针对Internet Explorer的CSS修复外，它们还可以让您轻松使用设计网格，这将在构建基于CSS的布局时处理大量繁琐的调整。
答案 19 :(得分：0)
在此基础上，无法保证这样的事情能够完美地发挥作用。只要浏览器开发人员找到自己做事的方式而不是“标准”的做事方式，你就会有差异。
我使用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中的空错误控制台），这使得在实际操作错误时更容易进行调试。
答案 20 :(得分：0)
我通常会针对W3C CSS validator进行开发，然后在相应的浏览器中验证我想要的内容。验证可以很好地实现一致的行为。
有时我会将页面剥离为仅在我定位的主要浏览器中验证和显示的样式，有时我会用其他海报提到的浏览器特定调整来补充它。
答案 21 :(得分：0)
退房 位于位置的Targeting IE Using Conditional Comments and Just One Stylesheet是一种很棒的技术，可以在不使用CSS黑客的情况下提供IE版本特定的样式;这允许您通过选择器而不是浏览器将样式规则保持在一起。
答案 22 :(得分：0)
如果我使用浮点数在框中布局页面，我倾向于发现看起来相同的CSS。流模型按照您的想法运行，并且它们在所有主流浏览器中忠实呈现。 我知道有些人会告诉我，使用大量花车是错误的，但效果确实不错。
答案 23 :(得分：0)
你问的是错误的问题，因为这是回答这个问题的唯一方法：
<!DOCTYPE html>
<html>
<head>
<style>* { background: #fff }</style>
</head>
<body></body>
</html>
答案不是很多，是吗？ ：）
其他人就在这里 - 在每个浏览器中让你的工作，不要试图让它看起来相同。你不能。
答案 24 :(得分：0)
这真的是一个难以回答的问题 - 所有浏览器？这是否意味着所有版本？移动浏览器？只是“主线”（歌剧，火狐，即和野生动物园）？
你甚至不会发现CSS级别1的完全合规性，所以你将不得不进行一些调整。根据我的经验，歌剧，firefox和safari在基本内容（定位，浮动，div等）方面都表现得相似，而且只是IE，你必须调整它。
您还可以使用经过测试的CSS库或框架，如yahoo网格（http://developer.yahoo.com/yui/grids/）或程序化界面，如google的网络工具包（http://code.google.com/webtoolkit/）。
答案 25 :(得分：0)
Yahoo User Interface（YUI）有一个CSS Reset实现，旨在形成所有浏览器的公共基线。这应该会让你非常接近。
答案 26 :(得分：-1)
应用设计锡箔帽
CSS：
*{display:none}