Question

在我的项目中，我有以下标记：

<div class="foo">
    <div class="bar">
        <select>
            <option>Very looooooooooooooooooooong value</option>
            <option>Some</option>
            <option>other</option>
            <option>value</option>
        </select>
    </div>
</div>

应用以下CSS样式：

.foo, .bar {
    position: absolute;
}

.foo .bar select {
    min-width: 100px;
}

我的意图是<select>至少占用其内容的大小。

在Firefox上，它有效。在Chrome上，它没有。

如果我在封闭的absolute上移除了两个<div>定位样式中的一个，那就可以了。

这看起来像Chrome错误，但我无法确定。

在我的情况下，两个父母必须具有absolute定位，所以删除它不幸不是一个选项。你知道任何解决方法吗？

证明问题的jsfiddle是here。

Answer 1

将min-width设置为自动。我在Chrome上测试了你的小提琴并且它有效。

Answer 2

如果您在.bar上指定宽度，则会允许一些灵活性See here

或者，您可以从.bar see here

中移除position：absolute

Answer 3

除去

foo .bar select {
min-width: 100px;
}

你将得到你的输出。它不需要。不需要给任何宽度而不是它的修复或自动

Answer 4

min-width是问题所在。删除它，将适用于Firefox和Chrome。

如何使<select>获取其内容的大小？</select>

4 个答案: