Question

我有2个输入：它们都有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像其他浏览器一样呈现？

Answer 1

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

Answer 2

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

Answer 3

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

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

如果我无法移除宽度：100％并且无法在绝对定位的框上设置宽度，我如何让IE7像其他浏览器一样渲染？

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

关于W3C position: absolute的{{1}}的一些理论。

Answer 4

当一个块元素（你的div - ＃box1）绝对定位时，它有点失去其隐含的100％宽度。这就是输入无法扩展到容器（现在为0宽度）的原因。

Answer 5

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

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

5 个答案: