代码之家 › 专栏 › 技术社区 › avernet

为什么输入宽度:100%不会在绝对框中展开?

absolute position internet-explorer-7 css

1

avernet · 技术社区 · 16 年前

我有两个输入:它们都有一个 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>

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

我想到两个问题:

为什么 宽度:100% 对符合标准的浏览器没有影响吗?我不得不说IE7让我感觉更直观。
如果无法删除 宽度:100% 不能在绝对定位的盒子上设置宽度吗?

5 回复 | 直到 14 年前

1

2

Cosmin 14 年前

试用使用 width:102% . 这是一个变通办法,但几乎完美。

2

1

avernet 16 年前

CSS 2.1规范说,在这种情况下发生的事情没有被指定。实际上,不同的浏览器实现这一点是不同的。您可以在以下网站上找到更多有关此的详细信息(包括更多案例和截图): Width property inside an absolutely positioned box .

3

0

Pekka 16 年前

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

我想你不会随便给1号箱一个固定的宽度(用 width 属性或坐标类似 left: xyz; right: xyz )或文本输入。

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

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

有关理论 位置:绝对 关于W3C here .

4

0

user151323 16 年前

当一个块元素(您的DIV-BOX1)绝对定位时,它就会失去它隐含的100%宽度。这就是为什么输入不能扩展到其容器之外(现在为0宽度)。

5

0

Kevin 16 年前

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

关于移动版

代码之家 - 一站式码农服务社区

沪ICP备11025650号