インターネットエクスプローラはdivの幅を無視します

ちょっと男に問題があります。 3列のウェブサイトを作ろうとしています。それはチラシのようです。インターネットエクスプローラはdivの幅を無視します

Firefoxではうまく見えますが、インターネットエクスプローラ（7は私のPC上のバージョンです）では、中央の列幅の幅は無視されています。ここで

はdiv#mainがあなたの中央の列である場合、それはでwidth設定されていません

</html> 

<head> 

<link rel="stylesheet" type="text/css" href="standards.css"> 

</head> 

<body> 
</div> 
<div id="main"> 

<div id="row"> 

<div id ="column" style="float:left;"> 

</div> 

<div id ="column" style="float:right;"> 

</div> 

<div id ="column" style="margin: 0% 0% 0% 35%;">

</div> 

<div id="row"> 

<div id ="column" style="float:left;"> 

</div> 

<div id ="column" style="float:right;"> 

</div> 

<div id ="column" style="margin: 0% 0% 0% 35%;"> 

</div> 


</div> 


</div> 

</body> 

</html>

とCSS、

div#column { 
border-style:solid; 
border-width:5px; 

float: top; 
text-align: justify; 

padding: 2em; 
min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */ 
height:97%; 
width:25%; 
background-color: #ffefd5; 

} 

div#row { 
border-style:solid; 
border-width:5px; 
margin: 5% 5% 5% 5%; 

text-align: justify; 

padding: 2em; 
min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */ 
height:200em; 
background-color: #ffefd5; 

} 

div#main { 
float: top; 
text-align: justify; 

padding: 2em; 
min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */ 


}

出典

2011-06-20 Siniyas

中央の列にはどのコードがありますか？また、あなたが試したことがありますか？重要（ちょうどキックのため） – Colum

'id'は一意であると考えられているので、代わりに' class'を使うべきです。 – kba

、コードですスタイル。 min-widthしかありません。 IE7にはmin-widthの問題があります。 http://reference.sitepoint.com/css/min-width

EDITを参照してください：コードの多くを見に

を、私はこの問題は、列divの上widthとmarginであると思います。 widthは、35％の25％x 3プラスmarginであり、100％を超えている。

また、すべて同じ3つの列がIDとなっています。 IDはシングルインスタンス用です。複数の要素で同じスタイルを使用する場合は、classを使用する必要があります。 CSSの#columnを.columnに、HTMLのclass="column"に変更してください。

出典

2011-06-20 02:04:24

いいえ、私は単にコンテナとしてメインのdivを持っていて、次にコンテナとしてdivを並べ替え、次に3つのカラム型のdivがあります。 – Siniyas

私はマージンのあるものを理解しているので、他の2つのdivがフローティングであるため、親divの境界からわずか35％です。衝突の問題はないはずですか？ – Siniyas

いいえ、Box Modelの詳細はこちらをご覧ください：http://stackoverflow.com/questions/113387/whats-the-relationship-between-margin-padding-and-width-in-different-browsers行内に3つの要素がすべて並んでいるので、奇妙なことを防ぐために幅（マージンを含む）は100％以下でなければなりません。 –

インターネットエクスプローラはdivの幅を無視します

答えて

関連する問題