1

私は 2 つの入力を持っています: どちらも を持ちwidth: 100%、2 番目の入力は絶対ボックスです:

<!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 では、両方の入力がページの幅全体を占めます。

次の 2 つの質問が思い浮かびます。

  • width: 100%標準準拠のブラウザで効果がないのはなぜですか? IE7 のレンダリング方法の方が直感的に感じられると言わざるを得ません。
  • width: 100%絶対に配置されたボックスを削除できず、幅を設定できない場合、IE7 で他のブラウザーのようにレンダリングするにはどうすればよいですか?
4

5 に答える 5

2

を使用してみてくださいwidth:102%。これは回避策ですが、ほぼ完璧に機能します。

于 2011-09-07T09:34:53.547 に答える
1

CSS 2.1仕様では、この場合に何が起こるかは指定されていません。実際、ブラウザが異なれば、これも異なる方法で実装されます。これに関する詳細（より多くのケースとスクリーンショットを含む）は、次の場所にあります。絶対位置のボックス内のWidthプロパティ。

于 2010-03-17T01:40:48.867 に答える
0

これは奇妙に聞こえるかもしれませんが、幅98％を試してみるとどうなりますか？以前は、100％の幅を使用しても一貫した結果が得られなかったことがわかりましたが、98％では一貫した結果が得られました。

于 2010-03-17T01:43:00.590 に答える
0

position: absolute takes the element out of the document flow. Width automatically becomes auto when making position: relativeas far as I know.

I think you won't get around giving #box1 a fixed width (using a width property or coordinates like left: xyz; right: xyz) or the text input.

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?

Good question. As far as I know, there is no fix for this behaviour. Setting width: auto should help.

Some theory on position: absolute on W3C here.

于 2010-03-16T22:57:05.837 に答える
0

When a block element (your div - #box1) is absolutely positioned, it's kinda loses its implied 100% width. Which is why the input cannot expand beyond its container (which is now of 0 width).

于 2010-03-16T22:57:20.183 に答える