jQuery/javascript 和 WebKit 的浮动问题答案

【问题标题】：Float issue with jQuery/javascript and WebKitjQuery/javascript 和 WebKit 的浮动问题
【发布时间】：2009-12-04 10:43:35
【问题描述】：

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

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

但是，如果我在 html，它正确呈现（没有 javascript 点击事件）。我有一个 URL 可以显示给你，但因为这是我的第一篇文章，所以不能显示。

关于为什么会这样的任何想法？

干杯，罗宾。

【问题讨论】：

你能更详细地描述它在 Webkit 上是如何失败的吗？你检查过 JS 控制台吗？
没问题！它失败的方式是，当您单击 URL 中的“菜单项 1”时，它会展开，但会阻止随后被激活的浮动（由于 js 引入了新类）。如果您在 FF3、IE8 或 Opera10 中查看相同的页面，它不会刹车。 JS 控制台没有显示错误。
这里是 webkit 的截图：demo.frojd.se/webkit/webkit.PNG ...这是 Firefox 的截图：demo.frojd.se/webkit/firefox.PNG

标签： javascript jquery css safari webkit

【解决方案1】：

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

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

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

【讨论】：

感谢您的提示！经过测试，没有添加任何边距或填充，但问题仍然存在。
很棒的发现，这将帮助我完成它！所以看起来 WebKit 需要一个固定的宽度才能工作。非常感谢！

【解决方案2】：

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

一个简单的测试：在控制台试试这个

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

【讨论】：

嗨 :) ！我试图这样做，但没有结果。想法是什么？你认为在 WebKit 浏览器中触发的响应与
不同吗？