使用jQuery / javascript和WebKit浮动问题

Question

我遇到了与WebKit相关的问题： http://demo.frojd.se/webkit/index.html

当您点击“菜单项1”时，它会显示它的子项。 这在Firefox 3.5，IE8和Opera 10中都很好。 在WebKit浏览器（Safari 4和Chrome 3）中，它没有。

但是，如果我预设了所有不同的类和css设置 html，它正确呈现（没有javascript点击事件）。我有一个网址可以告诉你，但不能，因为这是我的第一篇文章。

关于这可能是什么的任何想法？

干杯， 罗宾。

Answer 1

一个真实而丑陋的黑客 - 但是嘿它有效。 尝试隐藏并显示点击<li>

进行简单测试：在控制台中尝试此操作

$('#nav li:first').hide(50).show(50)

Answer 2

我真的没有密切关注代码，但在这种情况下要注意的是菜单项div上设置的填充或边距。在Safari中，这些不考虑宽度，因此它们可能使div的div或内容扩展得比你想象的更宽，这会导致下一个元素被推到你不期望的地方。

不确定这是否会有所帮助，但如果您仍然卡住了，可以查看它。

编辑：使用Web Inspector查看源代码后，看起来带有class ='parentHook'的div在点击后不够宽。点击类后更改为'parentContainer'，设置'margin-left：-18px; margin-top：-15px;'，这似乎摒弃了div的宽度。在Web Inspector中，我将该div的宽度更改为150px，并且按预期工作。