IE7のデフォルトの要素の幅が100％

StackOverflow https://stackoverflow.com/questions/618507

  •  03-07-2019
  •  | 
  •  

質問

作業中のWebアプリケーションに非常にイライラする問題があります（元々は作成していませんでした）。レイアウト用のフレームを恐ろしく十分に使用します。私が抱えている問題は、背景色とCSS経由で設定された境界線を持つすべての要素が100％幅にデフォルト設定されていることです。 div要素、段落要素などをテストしました。

スタイルシートを完全に削除してからテストしたところ、同じ問題が発生したため、問題を引き起こしているのはスタイルシートではありません。

コードが競合していないことを確認する簡単なテストを作成し、私たちと同じdoctypeとxmlnsを使用しました-同じ問題が発生しました。コードの例を次に示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    #test {
        border:1px solid #ccc;
        background-color:#ddd;
    }
</style>
</head>
<body>
    <div id="test">
        Test information!
    </div>
</body>
</html>

アイデアはありますか

役に立ちましたか？

解決

これはHTML / CSSで必要だと思います。ブロック要素は、それらを止めるものがない限り、全幅に広がります。

（FFは同じ動作をします。）

他のヒント

要素に背景または境界線があり、それが親の幅いっぱいに拡張されているためではなく、ブロック要素であるためです。背景または境界線は、要素の実際の大きさを確認するだけです。

デフォルトの幅は、実際には「100％」ではなく「auto」です。実際の違いは、境界線を含む要素は、境界線を除いた幅が幅の100％になるのではなく、幅の100％を使用することです（境界線を含む幅を親よりも広くします）。

要素で使用可能な幅を使用したくない場合は、フローティング要素にすることができます。その後、コンテンツに合わせて調整されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
    #test1 {
        float: left;
        border:1px solid #ccc;
        background-color: #ddd;
    }
    #test2 {
        float: left;
        clear: both;
        border:1px solid #000;
        background-color: #ccf;
    }
    </style>
</head>
<body>
    <div id="test1">
        Test information!
    </div>
    <div id="test2">
        Test information!
    </div>
</body>
</html>

RichardとBeefTurkeyが言うように、divはブロック要素であり、ブラウザーの幅を埋めます。

スパンなどのインライン要素を使用できます

<span id="test">
    Test information!
</span>

またはdivにスタイルを追加して強制的にインラインにします

div#test { display: inline; }

ブロックであるため、divはデフォルトで（親のサイズの）100％になりませんか？表示をインラインに変更してみてください：#test {display：inline;}

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top