CSS:为什么输入宽度:100% 不会在绝对框中展开? [英] CSS: Why an input width:100% doesn't expand in an absolute box?

查看：25 发布时间：2021/11/25 8:39:24 css internet-explorer-7 position absolute

本文介绍了CSS:为什么输入宽度:100% 不会在绝对框中展开?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有 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"><头><style type="text/css">#box1 { 位置:绝对}#box1 { 背景:#666 }输入 { 宽度:100% }</风格><身体><表格><输入类型=文本"><div id="box1"><输入类型=文本">

</表单>

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

想到两个问题:

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

解决方案

CSS 2.1 规范说在这种情况下会发生什么并没有具体说明.事实上，不同的浏览器以不同的方式实现了这一点.您可以在以下位置找到更多详细信息(包括更多案例和屏幕截图):绝对定位框内的宽度属性.

I have 2 inputs: they both have a width: 100%, and the second one is an absolute box:

<!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>

On standard-compliant browsers, the width: 100% seems to have no effect on the input inside the absolutely positioned box, but it does on the input which is not inside that absolutely absolute box.
On IE7, both inputs take the whole width of the page.

Two questions come to mind:

Why does the width: 100% have no effect with standard-compliant browsers? I have to say that the way IE7 renders this feels more intuitive to me.
How can I get IE7 to render things like the other browsers, if I can't remove the width: 100% and can't set a width on the absolutely positioned box?

解决方案

The CSS 2.1 specification says that what happens in this case is not specified. And indeed, different browsers implemented this differently. You'll find more details on this (including more cases and screenshots) on: Width property inside an absolutely positioned box.

这篇关于CSS:为什么输入宽度:100% 不会在绝对框中展开?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

CSS:为什么输入宽度:100% 不会在绝对框中展开? [英] CSS: Why an input width:100% doesn't expand in an absolute box?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

CSS:为什么输入宽度:100% 不会在绝对框中展开? [英] CSS: Why an input width:100% doesn&#39;t expand in an absolute box?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

CSS:为什么输入宽度:100% 不会在绝对框中展开? [英] CSS: Why an input width:100% doesn't expand in an absolute box?

登录关闭