如何确保CSS在所有浏览器上正常工作，而不需要在每个浏览器上进行目视测试？

Question

制作适用于不同版本的所有浏览器的网站的CSS真的很困难。尤其是需要设置不同的浏览器。 我想知道是否有可能测试CSS并确保它在所有浏览器中都能正常工作，而无需打开每个浏览器并手动检查布局？ 或者 是否有任何快速或标准方法可以做到这一点？

- pang

Answer 1

1. 使用CSS重置样式表
2. 使用好的CSS框架（如Blueprint、Boilerplate等）
3. 这是不可能的。

- Ólafur Waage

---

所有浏览器都有自己的小毛病。我不确定我们是否会看到所有浏览器完全相同地呈现HTML的那一天。 - Corey Sunwold

我很想在＃2上点个踩... CSS框架，用更好的词来说，是愚蠢的。 - Paolo Bergantino

心动了吗？那就去试试吧，伙计 :) 如果你认为不对，那就看看我提到的好框架，同时也链接到一个更多讨论的问题。 - Ólafur Waage

Answer 2

以下是一些重要的事项，可以帮助您开始您的旅程：

• 使用 DOCTYPE，否则浏览器会进入怪异模式。
• 重置您的 CSS，以便您可以将所需的样式应用于元素。
• 使用 JavaScript 库 - 在这些部分中流行的是 jQuery，并且我个人推荐使用它。但是，只要使用一个库就可以了，无论选择哪个都不重要。许多聪明的人已经花费了大量时间来处理浏览器之间的所有不兼容性。试图在您的网站上使用纯 JavaScript 进行大量动态操作几乎是自虐的。

一旦您开始执行这些操作，使您的网站在各种浏览器中工作得到了极大的简化。然而，无论如何，您仍然需要检查它们。没有任何绕过这一点的方法。

- Paolo Bergantino

Answer 3

实际上，没有一种标准的方法来解决这个问题 - 这只是事情的本质；然而，Adobe目前正在开发BrowserLabs，这应该有助于解决这个确切的问题。

- Tom

Answer 4

如果有一种自动化工具可以做到这一点，那就太好了。不幸的是，唯一判断某些东西是否视觉上正确的方法就是看它。

有一些服务（例如BrowserShots），它们会在不同的浏览器上访问您的网站并为您拍摄屏幕截图，然后让您下载包含您网站所有渲染的文件，但您仍然需要手动验证它们。

计算机并不擅长自动判断某些东西是否“好看”，否则所有浏览器都会完全按照您的意愿（使事物变得漂亮）。

如果您想测试JavaScript，可以尝试一个名为Selenium的测试套件。

将来，您可以考虑由jQuery创建者发起的一个名为Test Swarm的项目，它看起来很有前途，但仍处于测试阶段，可能永远不会发布，因为带宽成本问题。它将允许您使用分布式系统在每个主要平台上的每个主要浏览器上测试JavaScript。然而，由于涉及到此类系统的某些复杂性，这仍然是一个遥远的梦想。

- Dan Herbert

Answer 5

确保声明文档类型。 使用重置CSS。 避免在同一元素上同时使用宽度和填充（左和右）。 清理HTML和CSS中的代码。 当浮动元素时，不要使用margin左和右，而是使用其父级overflow:hidden、display:inline和height:1%，如果父级没有高度的话。 不要为元素同时设置margin-top或margin-bottom，而只设置margin-top或margin-bottom。因为相邻元素的边距会合并在一起，对于新手来说定位有些不可预测。 除非脚本需要，否则不要依赖z-index。

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<script type="text/javascript" src="js/html5shiv.js" ></script>
<script type="text/javascript" src="js/html5.js" ></script>

您可以从此浏览器兼容版下载shiv.js。

浏览器兼容性测试工具：

http://crossbrowsertesting.com/

http://browsershots.org/

http://www.browsercam.com/

http://caniuse.com

http://www.findmebyip.com/litmus/

- Web Designer cum Promoter

Answer 6

您无法真正避免人工UI测试。我同意其他人的观点，您应该符合标准并重置CSS。

很少会出现HTML + CSS在所有浏览器和平台上精确呈现的情况，仅因为每个浏览器的特异性。但是，仅仅因为存在轻微的渲染差异，并不一定意味着有错，这是进行人工UI测试的一个好理由。

- gonzohunter

Answer 7

我建议使用现成的前端开发框架之一，例如Twitter Bootstrap或Foundation。两者都有很好的文档和经过预测试，这将减少测试的痛苦。

它们包含：

• CSS重置/标准化

• 可用组件（按钮、表单元素、菜单等）。

• 网格布局（这是在网页中排列内容的完美方式）。

• JavaScript。

当然，在您调整这些框架时，您需要进行自己的测试。除了上述所有工具外，我建议使用IE-Tester，这是一个非常棒的IE调试工具（这是痛苦的根源）。

最后，为了达到完美，最好在所有浏览器和设备上进行网站测试，特别是如果您正在进行响应式设计。

你别无选择，必须这样做！这就是为什么Web设计师的薪水通常很高的原因 x-)

- wdalhaj