CSS：为什么输入宽度：100% 不会在绝对框中展开？答案

【问题标题】：CSS: Why an input width:100% doesn't expand in an absolute box?CSS：为什么输入宽度：100% 不会在绝对框中展开？
【发布时间】：2012-01-24 23:42:45
【问题描述】：

我有两个输入：它们都有一个width: 100%，第二个是一个绝对框：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">
            #box1 { position: absolute }
            #box1 { background: #666  }
            input { width: 100% }
        </style>
    </head>
    <body>
        <form>
            <input type="text">
            <div id="box1">
                <input type="text">
            </div>
        </form>
    </body>
</html>

在符合标准的浏览器上，width: 100% 似乎对绝对定位框内的输入没有影响，但它对不在绝对定位框内的输入有影响。
在 IE7 上，两个输入都占据页面的整个宽度。

想到两个问题：

为什么width: 100% 对符合标准的浏览器不起作用？我不得不说，IE7 的呈现方式让我感觉更直观。
如果我无法删除 width: 100% 并且无法在绝对定位的框上设置宽度，如何让 IE7 像其他浏览器一样呈现内容？

【问题讨论】：

标签： css internet-explorer-7 position absolute

【解决方案1】：

尝试使用width:102%。这是一种解决方法，但效果几乎完美。

【讨论】：

【解决方案2】：

CSS 2.1 规范说在这种情况下发生的事情没有指定。事实上，不同的浏览器实现这一点的方式不同。您可以在Width property inside an absolutely positioned box 上找到更多详细信息（包括更多案例和屏幕截图）。

【讨论】：

【解决方案3】：

position: absolute 将元素从文档流中取出。据我所知，在制作position: relative时，宽度会自动变为auto。

我认为你不会给#box1 一个固定宽度（使用width 属性或left: xyz; right: xyz 之类的坐标）或文本输入。

如果我无法移除 width: 100% 并且无法在绝对定位的框上设置宽度，我如何让 IE7 像其他浏览器一样呈现内容？

好问题。据我所知，这种行为没有解决办法。设置width: auto 应该有帮助。

关于 W3C here 上的 position: absolute 的一些理论。

【讨论】：

【解决方案4】：

当一个块元素（你的 div - #box1）绝对定位时，它有点失去其隐含的 100% 宽度。这就是为什么输入不能超出其容器（现在是 0 宽度）的原因。

【讨论】：

我确实观察到“它有点失去其隐含的 100% 宽度”。但是规范中在哪里指定？为什么它会 100% 松动？

【解决方案5】：

这听起来可能很奇怪，但是当您尝试 width: 98% 时会发生什么？过去，我发现使用 100% 宽度从来没有一致的结果，但 98% 可以。

【讨论】：

@Keving，在这种情况下，使用 width: 98% 并没有什么不同。