Chrome 9 中奇怪的边距错误答案

【问题标题】：Strange margin bug in Chrome 9Chrome 9 中奇怪的边距错误
【发布时间】：2011-07-03 22:52:38
【问题描述】：

我在使用 Google Chrome 9 时遇到了一个奇怪的问题：我为输入元素指定了左边距，但当我加载页面时 Chrome 会忽略它。

但是，当我打开开发者工具并关闭该特定声明然后再次打开时，边距已正确应用。

有问题的规则是：

margin: 8px 0 0 33%;

我认为这可能与混合单元有关，但使用：

margin: 1% 0 0 33%;

我也有同样的问题。

只有 Chrome 我发现了这个问题，IE9 和 Firefox 3.6 应用边距没有任何问题。

这是一个已知问题，我该如何解决？

顺便说一句，我使用的是 Windows 7 Ultimate 64 位，我还没有测试任何其他版本/操作系统。

更新：我在 Linux / Ubuntu 10.10 中使用 Chrome 9 时遇到了完全相同的问题

【问题讨论】：

多么奇怪。我看到你有几个无用的答案 :) 我在 Chrome 9 上出现了这个问题，但在 Chrome 11 上不是。这是我不久前尝试修复的similar question。不幸的是，我认为它没有包含对您有帮助的有用信息。
@thirtydot 有趣的是，我确实可以点击开发者工具中的任何其他（不相关...）样式规则，它会直接跳转到正确的位置...
现在修复了吗？还是我的 Chrome 9 突然决定不再这样做了？
@thirtydot 我把边距放在li 上。问题解决了。现在它只是稍微向右偏了一点，grrrrrrrrr ...
FWIW，我现在在 Chrome 23 mac 中遇到了同样的问题。 :(

【解决方案1】：

您需要清除浮动，您可以通过将溢出：隐藏添加到包装 LI 的 UL 元素来做到这一点。

#block_contact_form ul { overflow:hidden; }

【讨论】：

谢谢，我已经添加了，但是在页面加载时它仍然显示左侧的按钮。
尝试将 li 添加到选择器 #block_contact_form ul li { overflow:hidden }...这很奇怪，在 Chrome 中，如果我添加它，按钮会立即跳转。
@Seth 这样做是因为您将它添加到检查器中并且它正在重新应用样式。这实际上不是修复，而是与禁用和重新启用样式相同。

【解决方案2】：

我在 firebug 中弄乱了 css，发现这行得通：

margin-top:8px;
margin-left:33%;

【讨论】：

【解决方案3】：

似乎已经找到了解决方案，但如果无法针对此类错误提供 css 解决方案，则始终可以尝试使用 JQuery 或纯 javascript 设置 css。

$(.button input).css({margin: 8px 0 0 33%});

【讨论】：

这也不行，斯托克。我现在面临同样的问题。对我来说，解决它的唯一方法是删除在同一规则中声明的 overflow-x:hidden。不幸的是，我没有其他元素可以将规则放在...

【解决方案4】：

【讨论】：