1

我有 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 像其他浏览器一样呈现东西？
4

5 回答 5

2

尝试使用width:102%. 这是一种解决方法，但它几乎可以完美运行。

于 2011-09-07T09:34:53.547 回答
1

CSS 2.1 规范说没有指定在这种情况下发生的事情。事实上，不同的浏览器实现这一点的方式也不同。您将在以下位置找到更多详细信息（包括更多案例和屏幕截图）：绝对定位框内的宽度属性。

于 2010-03-17T01:40:48.867 回答
0

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

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

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

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

position: absolute关于 W3C的一些理论在这里。

于 2010-03-16T22:57:05.837 回答
0

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

于 2010-03-16T22:57:20.183 回答
0

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

于 2010-03-17T01:43:00.590 回答