使CSS在所有浏览器中呈现相同的最简单或者最快的方法是什么
在当今所有主要的浏览器中正确显示网页是一项非常耗时的任务。
有没有一种简单的方法可以使CSS样式在每个浏览器中看起来都一样？
或者至少我们有一些技巧可以使这项工作更轻松？
解决方案
回答
尝试使用CSS重置，例如eric meyer重置或者YUI重置。但没有简单或者完美的方法来使每种浏览器的外观看起来相同
回答
Yahoo CSS基金会将提供帮助。要标准化格式，我们将需要重置和设置基础。
回答
Yahoo用户界面(YUI)具有CSS重置实现，旨在实现所有浏览器的通用基线。这应该使我们非常接近。
回答
这真的是一个很难回答的问题-所有浏览器？这是否意味着所有版本？手机浏览器？只是"主线"(歌剧，Firefox，即野生动物园)？
我们甚至找不到完全符合CSS 1级标准的东西，因此我们将需要进行一些调整。在我的经验歌剧中，firefox和safari在基本内容(定位，浮动，divs等)上的表现都相似，这只是IE，我们需要对其进行调整。
我们还可以使用经过测试的CSS库或者框架，例如yahoo网格(http://developer.yahoo.com/yui/grids/)或者编程接口，例如Google的网络工具包(http://code.google.com/webtoolkit/ )。
回答
随时在所有浏览器上测试CSS。在宠物浏览器中让它达到完美的像素效果真是太糟糕了，却发现它在其他浏览器中还遥遥无期。
采用这种方法可以使我们轻松了解所有主流浏览器都可以使用。
回答
如果我使用浮点数将页面布置在盒子中，我倾向于发现外观相同的CSS。流模型按我们认为的方式工作，并且已在所有主要浏览器中忠实呈现。
我知道有些人会告诉我，使用大量的浮点数是错误的，但效果出奇的好。
回答
使用此处提供的Eric Meyer CSS重置，我已经取得了成功。它基本上会覆盖一堆默认的浏览器CSS样式。话虽这么说，仍然存在很多差异(可能是一些困扰问题，例如盒子模型差异等)。在这种情况下，使用Blueprint处理大多数CSS可能会更好。
回答
使用CSS重置将为所有事物提供相同的起点，但是对于我们在该起点之外所做的更改没有多大帮助。我不能说真的有任何简单的方法。一种解决方案是坚持使用有限的CSS，这些CSS在我们要支持的所有浏览器中都能正常运行。我们可能无法做很多更高级的CSS事情，但是CSS调试时间应该大大减少。
回答
我们可能还会看一下诸如Blueprint或者css-boilerplate之类的CSS框架或者yui网格框架。通常，这些框架为我们提供了一组标准的CSS类定义，我们可以将其应用到元素上，以特定的定义方式进行布局。
回答
如果需要完美的像素，则需要在样式表中使用px。使用CSS重置样式表，然后根据像素调整所有大小。
为了确保CSS在不同的浏览器中正确呈现，我们可能会发现BrowserShots之类的服务很有用，但是，我认为我们很难在所有浏览器中获得绝对的一致性。
我个人的喜好是使用正确的标记和CSS，排除任何浏览器漏洞以及设计布局以优雅地降级。
回答
我总是创建了一个基本的CSS样式表，该样式表可在与firefox等W3C完全兼容的浏览器中使用，然后创建替代浏览器的特定样式表，以解决其他浏览器(即IE6，IE7等)中的任何样式问题。
我们可以在HTML中使用以下代码来选择适当的IE样式表。
<!--[if lte IE 6]> <link href="/css/eqtr_ie6.css" rel="stylesheet" type="text/css" /> <![endif]-->
我们还可以使用在线网站(例如browsershots)在不同的浏览器中查看网站。
回答
从根本上讲，不能保证这样的事情会完美地工作。只要浏览器开发人员找到自己做事的方法，而不是"标准"做事的方法，我们就会有所不同。
使用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中为空的错误控制台)，这使我们在实际遇到错误时的调试更加容易。
回答
我建议我们看一下Blueprint和960 Grid System。
除了进行重置并包括针对Internet Explorer的CSS修复之外，它们都使我们可以轻松使用设计网格，在构建基于CSS的布局时，它将处理许多繁琐的调整。
回答
遵循严格的doctype还将解决许多差异。另外，我通常会添加一个<div>标签以将所有内容封装在正文中，因为我注意到Firefox与将body标签作为顶级元素进行处理的方式有所不同。
回答
我喜欢首先针对Firefox进行开发，通常使用Yahoo的YUI进行重置(并使用网格作为页面的基本结构)，并使用IE条件指令来覆盖IE在所有方面都以不同方式处理的格式。
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>
回答
我同意所有"重置"建议和"网格"框架建议，但是我确实想补充一点建议：实际上，由于无法控制客户端，因此在每个浏览器中实现相同的目标是无法实现的。例子：字体。
我们在CSS中声明了字体样式，但是某些Linux机器，某些Mac，某些移动浏览器将没有我们指定的字体。这种变化导致不同的文本长度和换行。然后，浏览器版本和运行每个版本的操作系统会有差异。不同的浏览器如何实现缩放功能；最终用户可以调整文本大小。完全相同的渲染只是一个无法实现的目标。
但是要振作起来！这是CSS的"艺术"部分：能够灵活地进行设计，以便优雅地处理浏览器，操作系统和最终用户调整之间的差异。不要追求相同的渲染-我们应该追求品牌一致性+适当的体验+灵活性。
回答
首先，我们可以尝试进行重设，就像这里提到的其他人一样，我们可以使用此css快速进行边距和填充重设：
*{margin: 0; padding: 0}
在设计CSS时，请确保使用的是兼容Standars的现代浏览器(我个人建议使用firefox 3，该浏览器具有出色的Web开发人员工具栏，我们可以使用该工具从浏览器中编辑CSS)。这样做肯定会使网站在所有新浏览器中看起来都不错。
我们将遇到的大多数布局问题可能是由于Internet Explorer对盒模型的错误解释所致，我们可以通过避免同时设置宽度和边距或者填充来避免这种情况。这看起来很烦人，但事实并非如此，只需将填充或者边距应用于元素内部的内容(已设置宽度)即可。
当然，存在更多问题，但这可能是最常见且烦人的问题，对于更具体的问题，我们可以随时尝试使用google。另外，最近，我正在考虑如果我的网站的受众允许它，则忽略IE6和旧版本的浏览器，在Web设计网站上，我们将永远找不到使用IE6的人，对吗？当然，由于许多(疯狂的；)人仍在使用IE6，这通常是不可能的。
另外，如果我们需要测试网站的浏览器快照，则可以免费快速进行。
回答
通过以下方式组织工作流程，这将减少大量的时间浪费。
- 确保声明一个doc-type。
- 使用其他在这里提到的重置方法之一。
- 在结构上工作
- 尽量避免在同一元素上使用宽度和填充。
- 始终考虑减少不必要的HTML和CSS，而不是一直增加。
- 浮动元素时，请尽量不要在左边和右边使用边距。
如果我们坚持使用这些项目，则不会出现很多最常见的问题。
PS我忘记提及的一项是在W3时使用验证器。
回答
我通常使用W3C CSS验证器进行开发，然后在各自的浏览器中验证事物的外观。验证对于保持一致的行为大有帮助。
有时，我会将页面简化为仅能在我定位的主要浏览器中验证并正确显示的样式，有时，我会用其他海报提到的特定于浏览器的调整来补充页面。
回答
css框架当然会有所帮助，尽管由于不需要或者不使用大量样式，它们很容易变得笨重。
退房
使用条件注释和仅一个样式表定位IE就是一切，这是一种无需使用CSS hack即可提供IE版本特定样式的出色技术。这使我们可以通过选择器(而不是浏览器)将样式规则保持在一起。
回答
确保包括正确的DOCTYPE。
我仍然看到人们定期处理盒模型问题，因为他们忘记了添加文档类型。没有适当的文档类型，Internet Explorer会以"怪癖模式"呈现，其他浏览器也会在较小程度上呈现。如果包含适当的doctype，则浏览器将切换到"标准模式"，并且彼此的行为非常相似。
除此之外，如果我们以谋生为目的，那么我们会迅速拾起并记住那些微妙的案例，其中IE解释的内容与Firefox等略有不同。通过一些经验，完全可以在我们喜欢的浏览器中设计整个页面，仅对CSS进行了非常小的调整，以使其在其他浏览器中呈现几乎完美的像素。
回答
首先为Firefox开发。我们可以在其他浏览器中进行测试，但是除非它能够按我们在Firefox中的要求工作，否则不必担心其修复。然后转到其他基于标准的浏览器，即Safari和Opera。如果我们编写了不错的HTML和CSS，则在这些浏览器中不需要太多工作。
然后继续浏览很多东西，IE。使用条件注释来定位特定的IE版本。 IE 7应该相当简单，对于IE 6，我们可能会发现必须牺牲设计的某些部分才能使其轻松工作。没关系，IE 6即将推出，所以如果我们不完全支持它，请不要担心。透明的PNG通常是最大的问题，AlphaImageLoader并不能在所有情况下都能解决问题。
如前所述，像Eric Meyer's这样的CSS重置是一个很好的起点，可根据需要使用它来构建自己的重置。除此之外，答案很简单：没有灵丹妙药。
回答
应用锡箔帽设计
CSS：
*{display:none}
回答
开始时非常耗时，尤其是如果我们仍在学习DIV + CSS的绳索时。但是，在我们进行了足够的练习并遇到了足够多的问题并解决了所有问题之后，我们将了解哪些工作有效，哪些无效。
这样一来，我们就知道如何首先编写最兼容的样式，从而节省了调试时间，并且几乎不对任何主要的现代浏览器造成任何问题：IE6，IE7，FF2，FF3，Opera 9，Safari 3 Win / Mac。
是的，它是可能的，并且尽可能简单。练习和征服它们，然后我们就会知道如何在第一次尝试中正确地做事。
好吧，唯一令人困惑的怪物应该是IE6. 它是浏览器。除此之外，ff2，ff3，opera 9，safari win / mac，ie7，ie8在呈现引擎中相对相似，至少存在的错误少于IE6.
我为我们提供了一些最佳实践(刚开始使用CSS之旅的人)进行编码，以获得最大的CSS兼容性：
- 首先使用重置。它使我们头脑清醒，并确保工作的每个步骤。
- 除非我们知道如何实现，否则不要在同一元素上使用填充(左右)和宽度。
- 如果元素是浮动的，则给它的父对象上溢：隐藏和高度：如果父元素还没有高度，则为1％。
- 不要同时给元素以" margin-top"或者" margin-bottom"为单位，而仅给出" margin-top"或者" margin-bottom"。由于相邻元素的边缘相互折叠，因此对于新手来说定位有些难以预测。
- 如果某个元素是浮动的，则为其显示display：inline。
- 除非脚本需要，否则不要依赖z-index。
- 如果IE6中发生任何奇怪的事情，请对该元素使用height：1％。
根据我的经验，这些确实可以真正解决潜在问题。使用它们，它们可以使我们避免因任何耗时的问题而绊脚的机会达80％。实际上，在处理特定标签时，有比这些更琐碎的技巧，但让我们称之为"一天"。
回答
我们问的是错误的问题，因为这是回答该问题的唯一方法：
<!DOCTYPE html>
<html>
<head>
<style>* { background: #fff }</style>
</head>
<body></body>
</html>
答案不多，是吗？ :)
其他所有人都在这里，使CSS在每种浏览器中都能正常工作，请不要尝试使其外观相同。你不能
回答
网站是否需要在每个浏览器中看起来都完全相同？
除此之外，我认为实践是完美的。并阅读所有有关可能遇到的潜在问题的信息。使用重置文件，正确的文档类型，验证器和框架可能在某种程度上对我们有所帮助，但最终我们可以控制代码，只有我们完全知道自己想要的样子。该代码可能是有效的，并且浏览器可能会完全按照指示执行操作，但看起来仍然不符合期望。
我们将CSS用于布局的目的越多，遇到的问题就越多，找到解决方法的问题就越多，我们也会学到更多。在使用结构化的语义HTML和整洁的CSS完全制作布局后，我很少需要花费很多时间来纠正一个或者另一个浏览器中的缺陷。
回答
- 使用重置代码段
- 使用网络标准进行开发
- 验证标记和CSS
- 不要在元素的相同部分上使用边距和填充
- 使用IE条件
- 在我们要支持的所有浏览器中进行测试
- 知道没有什么是完美的，但是我们可以接近。
