Question

<html>
    <head>
        <style type="text/css">
            div {
                border:1px solid #000;
                min-width: 50%;
            }
        </style>
    </head>
    <body>
        <div>This is some text. </div>
    </body>
</html>

我认为div应该是页面的50％，除非由于某种原因，div中的文本使其变大。但是，div周围的边框会延伸整个页面宽度。这种情况发生在IE和Firefox中。

建议？

Answer 1

我认为div应该是页面的50％，除非由于某种原因，div中的文本使其变大。

min-width未设置块的最小起始宽度;相反，它限制了块可以缩小的程度。

在min-width: 50%;中，50%是对包含块的引用。我从未使用min-width的百分比，但我发现它可以用于其他单位。例如，如果我有一个块（像一列文本），我想要全宽，但我不希望它低于最小宽度，我可以使用类似{width: 100%; min-width: 250px;}的东西。

请注意其他人提到的IE支持的警告。

Answer 2

如果您为元素提供absolute定位，则在Firefox中为50%。但是，IE不喜欢min-width或min-height属性，因此您必须将宽度定义为50%，以便在IE中使用。

Answer 3

如果没有min-width，您的div将占用整页宽度，即display:block元素的行为方式。添加min-width无法使其变小。

将display属性更改为absolute或float属性为left会使元素缩小以适合内容。然后，min-width开始有意义。

Answer 4

要添加到Chris Serra said，在IE＆lt; 7（和7？我现在无法跟踪，但肯定是＆lt; 8），width的行为与min-width的行为完全相同。

Answer 5

您告诉它最小宽度为50％。由于没有其他任何东西占用空间，它将占用所有空间（边距除外）。

如果你给它一个75％的最大宽度，firefox应该将它限制在那个范围内。 IE6仍然会忽略它。

正如David Kolar所说，我们中的许多人通常不会使用百分比作为最小宽度。

Answer 6

您可能想要尝试IE特定的样式表并包含和表达式：

print("width:expression(document.body.clientWidth < 1024? "50%" : "100%");");

这将根据加载时浏览器窗口的宽度更改宽度设置。我个人喜欢使用px作为单位测量，但您需要使用特定的设置进行尝试。

为什么CSS min-width属性不强制div具有指定的最小宽度？

6 个答案: