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 2009-07-20 20:34:30

好主意，我會編輯momentarilly – Josh 2009-07-20 20:56:25

首先，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 2009-07-20 20:49:13

你在包裝textarea的div上有一個325px的邊距。

csstest.html

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

更新：仔細觀察它似乎是IE如何處理圖例元素。 IE在Legend上疊加了上述邊距，而Firefox，Chrome等將它疊加在父項上。例如圖例是一種「浮動塊」...

由於問題「修復」本身在IE8（標準模式），我把它的IE6/IE7渲染是越野車。萬一不是很明顯，這條線迫使IE7渲染...

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

您可以刪除強制IE7，IE8讓正常渲染，然後再稍微CSS只爲IE6/7。

<!--[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:53:28

我不會把這個簡單的例子真的叫做。你有很多絕對和相對的定位，以及跨越一個塊級項目，而這個項目又是一個位於相對定位元素內的內聯元素，等等。這些事情往往會打破。

如果你只是想把一個textarea放在標籤旁邊，那麼確實有更簡單的方法呢？

來源

2009-07-20 20:54:16 oldwizard

IE CSS位置錯誤，有什麼想法爲什麼？

回答

相關問題