考虑到您只针对最新的浏览器（在编写 Chrome 37.x、Firefox 32.x、Internet Explorer 11 时应该涵盖主要的最新渲染引擎），您可以相当容易地实现跨浏览器兼容性，并且在大多数情况下 - hack免费，因为所有提到的浏览器都支持大多数最新的 HTML 和 CSS 属性。

在开始之前你应该问自己几个问题：

1.) 我将如何从花在使我的网站看起来与跨浏览器相同的时间/金钱中受益？

如果您花费大量时间优化您的网站并使其在所有浏览器中看起来都一样，但无法在合理的时间内收回成本，那么很明显您是在浪费时间来实现跨浏览器兼容性（例如：如果您正在使用的库与 Microsoft 签订了 10 年的合同以在他们的软件上运行？）。

2.) 我的网站内容在所有浏览器中看起来都一样重要吗（像素完美）？

如果没有特定原因需要虚线在所有浏览器中看起来都一样，那么您不应该打扰它 - 让浏览器按照它的渲染规则来渲染它。它在每个浏览器中看起来都不一样，但是没有普通用户会去检查您的网站是否确实在 Firefox 或 IE 中呈现相同的虚线。用户倾向于使用一个浏览器来浏览内容 - 只要您的所有网站功能都可以正常工作并且看起来很吸引人，那么您就可以开始使用了。像素完美的设计很少需要（您可能希望实现它们来炫耀您的技能 - 特别是在个人开发者作品集网站中）。

3.) 我的网站功能可以在任何浏览器中运行吗？

许多最新的 HTML/CSS(/JavaScript) 技术并不适用于所有浏览器，因为最新的 HTML/CSS 规范还远未完成，浏览器供应商通常决定在不遵循规范或更改规范的情况下包含测试功能，而供应商仍未发布其浏览器的新版本。如果是这种情况，您有两种选择：

• 实现一个 polyfill 来模拟所需的不受支持的特性
• 提供后备。回退通常具有有限的功能，但它们将提供最低限度的支持，因此当该功能不受支持时您的网站不会崩溃（即使显示“您的浏览器不支持此功能”消息也比显示空白页面更好）。

建立网站时的一些注意事项：

• 将您的网站视为模块。当您完成一个模块的设计（比如网站导航）时，在您打算同时支持的所有浏览器中对其进行测试。如果您发现任何问题，请在进入下一个模块之前尝试修复它们 - 调试较小的代码块比调试已完成的设计更容易，并且不知道究竟是哪个部分导致了问题。
• 将您的代码保持在最低限度。如果您只需要显示/隐藏一个 div，那么您不需要实现第三方框架来实现它（“没有足够的 jQuery”） - 纯 JavaScript 可以完美地做到这一点。
• 尽早重构并经常重构。您可能经常意识到您已经为可以以更简单的方式完成的事情编写了太多的 CSS 规则。不要害怕重构你的代码；这将使您的生活和以后将要在您的代码上工作的潜在开发人员的生活变得更加轻松，因为要阅读的代码更少，因此出错的余地也更少。
• 使用供应商前缀。即使在最新版本中，许多最新的 CSS 功能仍然需要特定的浏览器前缀才能运行。在常规 CSS 属性名称之前提供以供应商为前缀的属性名称，以使其在所需的浏览器中工作。

这些将是我在开始工作之前要考虑的主要考虑因素。

您需要注意的是 HTML、CSS 等的某些元素与不同浏览器的兼容性。较新的 HTML5 元素（甚至是一些 CSS3）在某些浏览器中不起作用，从而导致设计区域出现问题。

您可以通过查找许多可能的参考来检查这一点（Mozilla Developer Network、CSStricks、CanIUse、w3schools（另请参见w3fools））。这些通常有一个浏览器兼容性部分，它显示一个元素将在哪些浏览器中工作，以及是否可以使用任何替代或前缀来帮助兼容性 - 例如：

条件代码也可用于添加内容以使其适用于特定浏览器 - 例如，让 IE 的 8 版或更少版本使用HTML5shiv（让 HTML5 元素工作）：

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></sc/>
<![endif]-->

尽管首先制作一个可以正常工作的东西也很好。

我只关心最新的浏览器，像素完美的设计不是必需的。

那么你很可能会好起来。只要您按照标准构建，如果您只针对最新和最伟大的浏览器，就不应该有任何巨大的惊喜。只是不要完全依赖任何一项尚未得到广泛支持的 CSS 功能而没有后备计划。