IEのCSSの位置が間違っている、任意のアイデアなぜですか？

私は、次のコード（不要な部分がすべて削除された大きなページ）で、TextareaがIE 6または7の右側にあまりにも遠すぎるのはなぜか分かりません。Firefoxのようにテキストのすぐ隣にあるはずです。何か案は？IEのCSSの位置が間違っている、任意のアイデアなぜですか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>CSS Test</title> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> 
<style type="text/css"> 
div.storeProductFormInner { 
    text-align: center; 
} 

div.storeProductFormInner div.storeProductChoices { 
    display: block; 
    width: 660px; 
    margin: 0px auto; 
} 

div.storeProductFormInner div.storeProductChoices fieldset { 
    position: relative; 
    display: block; 
    width: 660px; 
    margin: 10px auto 0px auto; 
    padding: 0px; 
    text-align: right; 
    font-weight: normal; 
    border: none; 
} 


div.storeProductFormInner div.storeProductChoices fieldset legend span { 
    display: block; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 325px; 
    text-align: right; 
    font-weight: normal; 
} 


div.storeProductFormInner div.storeProductChoices fieldset div { 
    position: relative; 
    top: 0px; 
    left: 0px; 
    display: block; 
    width: 325px; 
    text-align: left; 
    border: none; 
    padding: 0px 0px 0px 10px; 
    margin: 0px 0px 0px 325px; 
} 

div.storeProductFormInner div.storeProductChoices fieldset div input, 
div.storeProductFormInner div.storeProductChoices fieldset div select, 
div.storeProductFormInner div.storeProductChoices fieldset div textarea { 
    margin: 0px; 
    position: relative; 
    top: 0px; 
    left: 0px; 
} 


div.storeProductFormInner div.storeProductChoices fieldset div textarea.TextboxXL { 
    width: 300px; 
    height: 200px; 
} 

</style> 
</head> 
<body> 
<div id="container"> 
     <div id="body_div"> 
     <div id="content_div"> 
      <div class="Module_Ecommerce_DF_product"> 
<div class="storeProductFormOuter"> 
<form id="ECommerce_DF_addToCart" action="/ajax_required.php" method="post"> 
<div class="storeProductFormInner"> 
<div class="storeProductChoices"> 
<fieldset> 
<legend><span>Personalized:</span></legend> 
<div> 
        <textarea name="choicetext_30378" rows="5" cols="20" id="eCommerce_DF_choice_30378" class="TextboxLG" title=""></textarea> 
    </div> 
</fieldset> 
</div> 
</div> 
</div> 
</form> 
</div> 
</div> 
</div> 
     <div class="clear"></div> 
    </div> 
</div> 
</body> 
</html>

出典

2009-07-20 Josh

質問にあなたのコードを含めてください。そのページを撮ってから6ヶ月後、誰かがあなたの質問から学ぶことができます。 – BryanH

良いアイデア、私は瞬間的に編集する – Josh

まず、HTMLが不正です。それ以外にも、CSSからいくつかのスタイルを削除すると、IEレンダリングが修正されます。ここに私の修正されたCSSがあります：

div.storeProductFormInner { 
    text-align: center; 
} 

div.storeProductFormInner div.storeProductChoices { 
    display: block; 
    width: 660px; 
    margin: 0px auto; 
} 

div.storeProductFormInner div.storeProductChoices fieldset { 
    position: relative; 
    display: block; 
    width: 660px; 
    margin: 10px auto 0px auto; 
    padding: 0px; 
    text-align: right; 
    font-weight: normal; 
    border: none; 
} 

div.storeProductFormInner div.storeProductChoices fieldset legend span { 
    display: block; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 325px; 
    text-align: right; 
    font-weight: normal; 
} 


div.storeProductFormInner div.storeProductChoices fieldset div { 
    position: relative; 
    top: 0px; 
    left: 0px; 
    display: block; 
    text-align: left; 
    border: none; 
    padding: 0px 0px 0px 10px; 
    margin: 0px 0px 0px 325px; 
} 

div.storeProductFormInner div.storeProductChoices fieldset div textarea.TextboxXL { 
    width: 300px; 
    height: 200px; 
}

出典

2009-07-20 20:44:09 Jacob

申し訳ありませんが、私はページのスニペットをコピーしたので、HTMLが不正形式でした。 – Josh

これはうまくいきました。ありがとうございました！ – Josh

テキストエリアをラップするdivには325pxの余白があります。

csstest.html

DIV.storeProductFormInner DIV.storeProductChoices FIELDSET DIV 
    margin: 0px 0px 0px 325px 
    /* order: top right bottom left */

更新：精密検査にはIEが伝説の要素をどのように扱うかのように見えます。 IEは上記のマージンを「凡例」の上に積み重ねていますが、Firefox、Chromeなどはそれを親に積み重ねています。例えば凡例は一種の「フローティングブロック」です...

IE8（標準モード）で問題が「修正」されているので、IE6/IE7のレンダリングはバグです。念のために、それは明らかではないが、このラインはあなたがIE8はその後、ちょうどIE6/7のためのCSSを微調整、正常にレンダリングしてみましょう、強制IE7をドロップする可能性が...

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

をIE7のレンダリングを強制されます。

<!--[if lt IE 8]> 
    <style type="text/css"> 
    div.storeProductFormInner div.storeProductChoices fieldset div{ 
     margin-left: 0px; 
    } 
    </style> 
<![endif]-->

出典

2009-07-20 20:30:59 scunliffe

IEレンダリングのバグであることに気付きましたが、残った余白が最終的には犯人であることはわかりませんでした。 Jacobのソリューションがうまくいかない場合は、私が使用している現在の条件付きCSSよりもはるかに優れているため、これを使用します。これは左のテキストボックスを調整するだけです。-180px。恐ろしいハックのように感じる！ – Josh

私はこれを簡単なサンプルと呼んでいません。あなたは、絶対的で相対的な位置づけをたくさん持っているだけでなく、ブロックレベルの項目にスパンを作ります。これは、相対的に配置された要素などの内側にあるインライン要素の内側にあります。これらのことは壊れやすい。

ラベルの隣にテキストエリアを配置したい場合は、それを行う簡単な方法がありますか？

出典

2009-07-20 20:54:16 oldwizard

ポイントを獲得しました。私のポストタイトルから「シンプル」を削除します。 – Josh

IEのCSSの位置が間違っている、任意のアイデアなぜですか？

答えて

関連する問題