Css 为什么添加溢出：隐藏导致元素收缩_Css_Jquery Ui

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

css jquery-ui

Css 为什么添加溢出：隐藏导致元素收缩,css,jquery-ui,Css,Jquery Ui,我正在使用jqueryui，并构建了一个工具栏（div元素），其中包含按钮组（span元素），每个按钮组都包含按钮、收音机等在一些单选按钮上，我创建了复杂的标签来模拟MS Word 2007样式的按钮。有一个带有样式预览的iframe和一个带有按钮名的p元素例如按钮名称有些按钮名称可能很长，所以我给了p类“overflow:hidden”。这已经纠正了溢出问题，但在firefox中，标签的高度略有缩小，在IE8中，普通按钮显示得更高。Chrome显示的正是我所期望的，IE低于8的版本

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

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

例如


按钮名称

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

以下是显示问题的屏幕截图：

实际的页面相当复杂，并且是用JS生成的，所以我不能在这里复制/粘贴它。我不知道还有什么其他的CSS可以给人们一个想法，但如果有人感兴趣，我会PM你我的IP，这样你可以看看

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

标签或某些其他元素的大小很可能小于其内部元素的总大小，添加

溢出：隐藏可防止其拉伸以容纳较大的子元素，但会保持预定义的大小。溢出：隐藏，隐藏垂直和水平溢出，
可能是垂直拉伸长方体
您需要检查所使用的边距、填充、线条高度和字体大小
在这些情况下，Firebug非常有助于了解发生了什么，它在哪里
额外的空间来自于您可以打开/关闭css属性
希望能有帮助。
另外，你可以给我发送IP，我会快速查看…
好吧，即使没有复制问题的HTML/CSS示例，也很难解决这个问题，但有一点可能是问题，那就是你的HTML在这里是无效的。
不允许在其内部包含块级元素，而
和
都是块级元素。不同的浏览器对这种情况的处理可能不一致，因为它们不需要这样做才能符合规范。
如果您将段落的样式设置为overflow-x:hidden，那么这只是溢出影响的宽度？
删除无效的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>


跨度
{
显示：内联块；
边框：1px纯红；
保证金：0；
填充：0；
宽度：50px；
}
#b
{
溢出x：隐藏；
}
测试
测试2测试2测试2测试2测试2测试2测试2测试2测试2测试2测试2测试2测试2测试2测试2测试2测试2

第二个跨度正好显示了您如何描述。但是，如果将这些跨距更改为“显示：块”，并将其浮动，它们将垂直对齐
看起来这是两个浏览器中的一个bug，但它没有按预期工作。不幸的是，我不认为有什么方法可以像你现在设计的那样来修复它，但是你应该能够重做你的样式，使用浮动来获得相同的盒子整体外观。bugzilla已经知道这个错误，要修复它，只需设置垂直对齐：top；对于spans或DIV来说，这听起来应该有效，但事实并非如此：如果你想通过IP发送，我已经给你发了电子邮件了？Span也是一个内联元素，因此您也不能合法地将块元素放入其中。您不应该在任何内联元素中放置任何块元素。不确定这是否是问题的原因，但也可能导致其他问题。非常有用，谢谢！我现在已经按照建议使用display:block和float:inline覆盖了工具栏，所有东西都排列得很好！注意到一个我应该能够排序的小问题，工具栏div比所有浏览器中最高的跨度高4倍，但它似乎与填充或边距无关。另外，我不知道内联元素规则中的无块元素，谢谢你指出这一点！我已经和firebug一起看过了，但是看不到有没有任何变化。看起来这里没有PM系统。。。如果你给我发电子邮件到[删除]，我会把IP转发给你。谢谢
<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>