Firefox和Safari（或Chrome）之间的跨浏览器调试

Question

我注意到Safari和Chrome在HTML和CSS方面表现相同。但是，Firefox和Safari之间存在差异（因此，Chrome也是如此）。

有时在Firefox中看起来很棒，但是在Safari和Chrome中，CSS行为不当。错误行为的原因可以归结为“任何事物”（与IE 6和7相反，错误行为通常是由于过多的填充/边距导致元素浮出位置引起的）。例如，在为Safari调试网站的CSS时，以下属性导致了跨浏览器的不当行为：

• 位置
• 高度
• 宽度
• 填充
• 余量

Chrome和Safari CSS调试是否有共同模式？

你们能否深入了解Safari和Firefox之间的差异，这可能有助于我进行跨浏览器调试？ 感谢

Answer 1

我注意到了差异，但并没有那么引人注目。像往常一样，使用css-reset可以轻松克服/避免大多数差异。你在谈论的网页上使用过吗？

Answer 2

通常，并且有趣的是，同一页面的跨浏览器呈现之间的大多数差异都归因于：

• 无效（x）html，使用W3中的在线html验证程序，以确保加价的有效性。
• 缺乏为CSS建立基线（如@Jeroen所示：使用css重置）。
• CSS的使用因浏览器到浏览器的不同而有所不同，特别是较新的CSS 3（transitions，column-count和box-reflect ¹ ，特别是虽然还有很多很多其他的。）

---

1. 这可能是，也可能不是万维网联盟包含在CSS3中的提议，我发现它的唯一引用仅限于-webkit供应商前缀，这表明它是< em>可能是专有扩展。但是，我希望其他人也会效仿。使用css进行反射比使用js / php更容易......

Answer 3

这个css的区别是因为firefox和chrome浏览器存在默认的样式差异。单击此链接以获取默认的CSS表

http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

在开发网页本身时，我们必须确保通常为两种浏览器覆盖此默认样式。使用浏览器扩展，如-webkit和-moz等..

在开发和调试状态之后，我们需要覆盖这个默认样式。我认为我们没有任何常见的调试。如果我错了，请纠正我。