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

【问题标题】：Cross Browser Debugging between Firefox and Safari (or Chrome)Firefox 和 Safari（或 Chrome）之间的跨浏览器调试
【发布时间】：2011-04-14 21:20:04
【问题描述】：

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

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

位置
身高
宽度
填充
边距

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

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

【问题讨论】：

您知道Safari 和Chrome 都使用相同的渲染引擎（Webkit）吗？ Firefox 和 Chrome/Safari 的区别在于不同的渲染引擎（Gecko，用于 Firefox）。
@David - 这意味着什么。 Google 的定制度很高。
@orokusaki，虽然我知道 Google 已经自定义了他们的实现，但我还没有遇到过 Chrome 呈现有效 (x)html 页面与 Safari 有任何重大差异的情况。
@orokusaki，我想我应该证明我之前的断言，我是一个 Linux 男孩，主要是，只有当我不在自己的机器上时才使用 Windows。谢天谢地，这些天来很少见。你还记得哪个网站吗？我很想看看有什么不同。
@orokusaki，啊，我一直想知道border-radius ，自从我（偶然）发现它在 Chrome 中原生工作，据我当时记得，只有在 Safari 中使用 -vendor- 前缀。谢谢=)

标签： css firefox google-chrome safari cross-browser

【解决方案1】：

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

【讨论】：

【解决方案2】：

通常和轶事一样，同一页面的跨浏览器呈现之间的大部分巨大差异是由于：

invalid (x)html，使用W3的在线html验证器来保证标记的有效性。
缺乏为 CSS 建立基线（正如 @Jeroen 建议的那样：使用 CSS 重置）。
CSS 的使用因浏览器的不同而不同，尤其是较新的 CSS 3（transitions、column-count 和 box-reflect¹，尽管有很多很多其他）。

这可能是，也可能不是，万维网联盟提出的将其纳入 CSS3 的提案，我发现的唯一引用是专门带有 -webkit 供应商前缀的，这表明它是可能是专有扩展。但是，我可以希望其他人也会效仿。使用 css 应用反射比使用 js/php 容易得多...

【讨论】：

【解决方案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 等浏览器扩展。

开发完成后处于调试状态，我们需要覆盖这个默认样式。我认为我们对此没有任何共同的调试。如果我错了，请纠正我。

【讨论】：