css - 为什么在这种情况下 max-width 不起作用

Question

为什么下例中的 max-width 不起作用？

http://jsfiddle.net/uvbfo8np/

<form>
<fieldset>
    <ul>
        <li>
            <label>blah</label>
            <div>
                <input />
            </div>
        </li>
    </ul>
</fieldset>

input {
    width: 1000px;
    max-width: 100%;
}
form {
    max-width: 100%;
}

为了明白我的意思，让右边的窗口小于 1000 像素(这样输入就比窗口大)，然后将输入的宽度切换到 100%，看看它现在是否适合。

我要归档的内容:输入应为 1000 像素宽，但不能比屏幕宽(或在 jsfidde 框架中)。

正如有人在评论中所说， parent 没有任何宽度。但至少表单元素有一个宽度(设置为最大宽度)。正常情况下是有效的。这里的问题是 fieldset。从代码中删除字段集，它就可以工作了。

Answer 1

问题在于 <fieldset> .它们很难重置，在 Webkit 和 Gecko 中它们总是和它们最宽的 child 一样宽，忽略 max-width .

您可以使用 min-width: 0 在 Webkit 中覆盖此行为, 但 Firefox 不允许作者对其进行编辑。

据我所知，唯一的解决办法是设置 display <fieldset> 的属性(property)至 table-cell .这很丑陋，但它有效。