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位置错误，有什么想法为什么？

回答

相关问题