IE7のデフォルトの要素の幅が100%
-
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;}