Question

我正在使用jQuery UI，并构建了一个工具栏（div元素），带有按钮组（span元素），每个按钮组包含按钮，无线电等。

在某些单选按钮上，我创建了复杂的标签来模拟MS Word 2007样式按钮。有一个带样式预览的iframe，带有按钮名称的p元素。

E.g。

<label ... >
   <iframe ... ></iframe>
   <p>Button Name</p>
</label>

某些按钮名称可能很长，所以我给了p类“overflow：hidden”。这已经纠正了溢出，但是在Firefox中标签的高度略有缩小，而在IE8中，普通按钮显示得更高。 Chrome显示我的预期，低于8的IE版本并不重要。

以下是显示问题的屏幕截图：http://img155.imageshack.us/img155/1504/layoutissue.jpg

实际页面相当复杂，并使用JS生成，因此我无法在此处复制/粘贴它。我不知道其他什么CSS发布给人们一个想法，但如果有人感兴趣我会PM你我的IP所以你可以看看。

我很感激任何建议。

Answer 1

删除无效的HTML，我可以复制该问题，这清楚地表明无效的HTML不是原因：）

这似乎是内联块样式元素的问题，溢出设置为除可见之外的任何内容。看看这个简单的例子：

<html>
<head>
<style>
span
{
    display: inline-block;
    border: 1px solid red;
    margin: 0;
    padding: 0;
    width: 50px;
}
#b
{
    overflow-x: hidden;
}

</style>
</head>

<body>
<span id="a">test</span>

<span id="b">test2test2test2test2test2test2test2test2test2test2test2test2test2</span>
</body>

</html>

第二个跨度显示了您的描述方式。但是，如果您更改这些跨度以显示：阻止并浮动它们，它们将垂直排列。

看起来这是两个浏览器中的错误，它无法按预期工作。不幸的是，我认为有一种方法可以像你现在的样式那样修复它，但你应该能够重做你的样式来使用浮动来获得相同的整体外观。

Answer 2

可能是标签的大小或某个其他元素小于其中元素的总大小，添加overflow: hidden会阻止它伸展以容纳更大的子元素，而是保持预定义的大小。

Answer 3

溢出：隐藏，隐藏垂直和水平溢出，你有可能垂直拉伸盒子

你需要检查使用的边距，填充，行高和字体大小。

在这些情况下，Fire-Bug非常有用，可以查看发生了什么，以及在哪里额外的空间来自你可以打开/关闭css属性。

希望它有所帮助。附：你可以发给我IP我会快速看看......

Answer 4

好吧，即使没有复制问题的示例HTML / CSS，也很难解决这个问题，但有一点可能是问题，那就是你的HTML在这里无效。 <label>不允许其中包含<iframe>和<p>的块级元素。各种浏览器可能无法一致地处理这种情况，因为他们不需要为了符合规范。

Answer 5

如果你给段落设置样式overflow-x：hidden所以它只是溢出影响的宽度？

Answer 6

bugzilla已经知道这个bug，修复它只需设置vertical-align：top;对于跨度或分歧，问候

为什么添加溢出：隐藏导致元素缩小

6 个答案: