CSS：当显示设置为无时没有 DIV 宽度

Posted 2023-05-08

【中文标题】CSS：当显示设置为无时没有 DIV 宽度

【英文标题】：CSS: no DIV width when display set to none

【发布时间】：2012-04-13 16:03:45

【问题描述】：

我正在制作一个下拉小部件。向下展开的菜单设置为与父级相同的宽度（使用 jQuery）。

小部件按预期工作，但是，您将它放在一个 DIV 容器中，并将初始显示设置为无。当显示此容器时，根据 jQuery 的所有下拉宽度都为零... 如果容器默认显示，一切正常。

希望我的小提琴能更好地说明我的意思：http://jsfiddle.net/ruFzR/ 在结果窗格上；顶部下拉菜单位于容器外部，底部位于容器内部。除了一些明显的样式问题外，宽度没有扩大。

【问题讨论】：

这可以用css简单地完成

是的。我不会以这种方式进行下拉。顶多用js做动画，或者显示/隐藏方法。

【参考方案1】：

您可以改用visibility: hidden; 来避免display: none; 引起的宽度问题。使用visibility: visible; 使其可见。

元素保持在您的内容流中（相同大小等），而它只是不可见。

【参考方案2】：

如果您需要隐藏某些内容的宽度，并且无论出于何种原因无法取消隐藏，您可以克隆它，更改 CSS 使其显示在页面外，使其不可见，然后测量它。如果它被隐藏并在之后删除，用户将不会更聪明。

例子：

$itemClone = $('.hidden-item').clone().css(
        'visibility': 'hidden',
        'position': 'absolute',
        'z-index': '-99999',
        'left': '99999999px',
        'top': '0px'
    ).appendTo('body');
var width = $itemClone.width();
$itemClone.remove();

【参考方案3】：

.width() 是由浏览器处理的，这就是为什么你会得到“0”尝试使用属性

 $('#elt').attr('width');

【讨论】：

这会读回width 属性，但正如您在他的标记中看到的那样，他没有设置一个。

【参考方案4】：

从示例中我不确定问题是什么..

但你应该设置（在那个例子中）

.splitButton2 > divwidth:100%;

这相当于您编写的 jQuery 代码，没有缺点（如果元素是 display:none，则宽度为 0，javascript 依赖项）并且在浏览器上更容易..

【参考方案5】：

如果你要使用display:none:，你必须先显示菜单，计算宽度，然后隐藏它。或者，您可以使用绝对定位隐藏，因为元素已被绘制，它应该正确报告宽度。示例：position: absolute; top: -999em;