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

【问题标题】：Why is adding overflow:hidden causing an element to shrink为什么添加溢出：隐藏导致元素缩小
【发布时间】：2013-06-23 18:03:56
【问题描述】：

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

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

例如

<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，你可以看看。

如有任何建议，我将不胜感激。

【问题讨论】：

标签： css jquery-ui

【解决方案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>

第二个跨度显示了您的描述方式。但是，如果您将这些 span 更改为 display: block 并浮动它们，它们将垂直排列。

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

【讨论】：

非常有帮助，谢谢！我现在按照建议使用 display:block 和 float:inline 覆盖了工具栏，一切都很好！注意到我应该能够排序的一个小问题，工具栏 div 比所有浏览器中的最高跨度高 4px，但它似乎与填充或边距没有任何关系。
另外，不知道内联元素规则中没有块元素，谢谢指出！

【解决方案2】：

标签的大小或某些其他元素的大小可能小于其中元素的总大小，添加 overflow: hidden 可防止它拉伸以容纳其较大的子元素，而是保持在预定义的大小。

【讨论】：

【解决方案3】：

overflow:hidden，隐藏垂直和水平溢出，您可能正在垂直拉伸盒子

您需要检查使用的边距、内边距、行高和字体大小。

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

希望对您有所帮助。附言你可以把IP发给我，我看一下...

【讨论】：

我用萤火虫看过它，但看不出有什么变化。看起来这里没有 PM 系统...如果你给我发一封电子邮件到 [已删除] 我会把 IP 转发给你。谢谢！

【解决方案4】：

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

【讨论】：

Span 也是一个内联元素，因此您也不能合法地将块元素放入其中。您不应该将任何块元素放在任何内联元素中。不确定这是否是这里问题的原因，但它也可能导致其他问题。

【解决方案5】：

如果你给段落样式 overflow-x: hidden 那么它只是溢出影响的宽度？

【讨论】：

听起来应该可以，但它没有，做了同样的事情：S
如果您想在 IP 上发送，我已经给您发了电子邮件？不介意看代码。

【解决方案6】：

bugzilla 已经知道这个错误，要修复它只需 set vertical-align: top;到跨度或 div，问候

【讨论】：