可怜的Safari渲染

Question

我正在使用我正在处理的Web应用程序在Safari中遇到重大渲染问题。大部分设计都是使用绝对定位的div来完成的。这在Internet Explorer，Firefox，Chrome，Opera，Netscape和konqueror上呈现得很好。在Safari中，它只是乱七八糟的混乱。

Safari是否缺乏对div元素绝对定位的支持？

使用Safari浏览器解决问题并查看正在发生的事情的最佳方法是什么？

更新：我想说明我确实找到了这个问题，我要感谢所有提出建议的人。 WebKit的“Inspect Element”提供了最有用的信息。它们似乎与CSS中的内联样式和样式冲突。虽然safari从.css文件中获取了样式，但其余的浏览器都使用了内联样式。我能够看到与建议的工具中的信息冲突。

Answer 1

<强> 1。 Safari的支持？

Safari实际上是一个体面的浏览器。如果它有它的缺点，它们并不比任何其他浏览器更糟糕，并且它们不属于旧IE浏览器的类，它们有非常严重的问题，甚至缺乏对Web标准的基本支持。要具体回答你的问题，是的，支持绝对定位。

Safari当然可以呈现现代X / HTML CSS设计，并且由于您的受众群体大部分都在使用Safari，您也可以忘记解雇浏览器的概念。这是一个很好的浏览器，无论如何我们都无法改变它。我们只需要处理这些错误，无论它们是什么。

<强> 2。如何进行调试？

没有具体的例子，任何人都无法帮助你做到这一点。可以公平地说，你有一些问题控制基于CSS的布局。您可能有一些无效标记，在某些情况下会产生您所描述的极端浏览器特定异常。

从基础开始。验证您的标记和CSS。

• Markup Validator
• CSS Validator

确保您使用standards mode进行渲染。

寻找具体问题的答案

如果一切都有效并且您仍有问题，则必须逐一跟踪它们。即使您在Safari中逐个重建页面以查看事物开始放松的地方，也值得这样做。如果在此过程中您真的不明白为什么存在某种行为，那么您至少会有一个特定问题，您可以使用它来寻找答案。 可以在SO 上回答，如果不是，你可以问它。

Answer 2

问题可能出在你的JavaScript中; Safari最引人注目的一点是它喜欢在出现任何错误后停止执行JavaScript。

CSS可能不是问题，因为Safari比其他任何浏览器都有更好的标准和CSS支持（好吧，我说过。）

使用最近Web Inspector中的内置nightly build of WebKit来追踪您的问题。