Question

我无法弄清楚为什么在下面的代码中（删除了所有不必要部分的较大页面）Textarea在IE 6或7中太远了。它应该在文本旁边，就像在Firefox中一样。有什么想法吗？

<!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>

Answer 1

在包裹textarea的div上有一个325px的边距。

csstest.html

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

更新：仔细检查后，它似乎是IE对待Legend元素的方式。 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]-->

Answer 2

首先，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;
}

Answer 3

我不会真的称之为简单的例子。您有很多绝对和相对定位，以及跨越块级项目，而这个项目又位于相对定位元素内部的内联元素中，依此类推。这些事情往往会破裂。

如果你只是想在标签旁放一个textarea肯定会有更简单的方法吗？

IE CSS位置错误，任何想法为什么？

3 个答案: