如何跨浏览器调试网页呈现兼容性问题？

Question

我正在开发一个主要使用Firefox的网页。我经常遇到我的网页在Firefox中正确呈现，但在Chrome和IE中有一些意想不到的行为。

一般来说，如果它与javascript相关，我通常会在Chrome中打开Developer Console，看看是否有任何错误，这让我知道可能出现的问题。 不幸的是，如果它与CSS相关或HTML元素问题，我通常会丢失。

在一个特定的情况下，我在<td>内放置了一个div，我很遗憾为什么chrome无法正常呈现它，无论firefox是否满意并且没有抱怨。

所以我的问题是，如何调试与Chrome和CSS中的HTML页面呈现相关的问题，并确定可能会有什么问题。

我的相关问题是，是否有指导方针让我的网页几乎在所有流行的浏览器中都能轻松工作？我特别想到工具或流程，它会警告我与我的网页的兼容性问题。

Answer 1

IE (Internet Explorer)和little effort彼此不匹配，您只需为IE投入更多时间和精力，照亮IE并感到高兴，作为建议，如果可能的话，使用Twitter Bootstrap，它是一个准备好且经过测试的css框架（也许框架不是完美的名称）。

基本上，据我所知，只有css reset可用于获得一定的一致性，但您仍需要测试不同的浏览器，因为每个浏览器都有不同的rendering engine。如果您想在列表中保留IE，请先测试IE的布局。

仅适用于IE或Inconsistent Exposer（IMO），有一个开发人员工具（IE Tester）可以在不同版本的IE上测试布局（HTML / CSS）并且仅适用于Windows，因此如果您是Windows用户，它可能对您有所帮助。还有一个在线测试仪，有时也很有用，它是browsershots.org。

此外IE有一个调试器/开发人员工具，按 F12 会显示它，所以你可能会看到如下内容：

Google Chrome内置调试器/检查器（ CTRL + SHIFT + I ），而Firefox可能使用Firebug扩展名，这些浏览器不是像IE一样愚蠢，这些浏览器有很多免费的调试扩展，不用担心这些好人。

---

一般来说，IE用户是愚蠢的，习惯于在屏幕上看到愚蠢的东西，所以我不会过多考虑他们，因为他们真的不知道差异，但作为开发人员，你可能需要考虑一下，在这种情况下，如果他们希望我为IE < 10制作一个兼容的网站，我会向客户要求额外费用，因为这需要额外的努力。

You dunno me ? Leh--hoo-zehar (Looser) IE am a legendhhh. Smooky...!

Answer 2

我不知道有任何工具会警告你，因为没有办法让工具验证你想要的结果。

至于如何测试HTML / CSS。 Chrome支持最多的HTML-5和FF紧随其后。如果你使用chrome进行开发，它通常可以在FF和via verse中使用。 IE是痛苦的地方。 IE不支持所有HTML标记，并且通常会使事情变得不稳定。我通常创建我的网页，一旦我喜欢我打开IE和调试的结果，就专注于FF和chrome。有98％的时间需要进行CSS更改。我首先调试CSS，如果在经过大量工作后我无法使用CSS解决它，我将考虑更改HTML。我尝试避免更改HTML，因为您必须再次调试所有其他浏览器。

Answer 3

Chrome中开发的样式和代码通常可以在Safari，Opera（相同的引擎）和IE 10+中使用，几乎没有任何不一致。您将在Firefox中获得一些与CSS3规范相关的罕见定位问题，特别是在后台定位方面。您还会发现Firefox独有的一些JavaScript问题。

IE9通常是一项很好的运动，通常没有太多问题。 IE8会有一些，他们会根据操作系统有显着差异（因为每个IE都有多个版本，并且它们都支持不同的Javascript和HTML规范），特别是你会发现许多问题与XP IE8并不是真的不支持它（微软甚至不愿意）。

在大多数情况下，你会发展到IE的不一致性，除非它是一个CSS3规范，偶尔会出现javascript异常（js框架通常可以提供帮助，因为其中一些是为了实现这个目标而制定的） ）。

就工具而言，browserstack很不错，但并没有给你很多时间。如果您尝试使用的是现代caniuse，那么首先要访问它。非IE浏览器之间几乎所有问题都是HTML5或CSS3特定的。