代码之家 › 专栏 › 技术社区 › Josh Andreas Rehm

IE CSS位置错误,有什么想法吗?

css internet-explorer

Josh Andreas Rehm · 技术社区 · 15 年前

我不明白为什么在下面的代码中(一个删除了所有不必要部分的大页面),文本区域在IE 6或7中太靠右了。它应该就在文本旁边,就像在火狐中一样。有什么想法吗?

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

3 回复 | 直到 15 年前

Jacob 15 年前

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

scunliffe 15 年前

在环绕文本区域的分区上有325px的边距。

CSHTML

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

更新: 仔细观察,似乎是IE处理图例元素的方式。IE将上面的空白“叠加在”图例上,而火狐、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]-->

oldwizard 15 年前

我不认为这是一个简单的例子。您有许多绝对和相对位置,以及将跨度设置为块级项,而块级项又位于相对位置元素内的内联元素内,等等。这些东西容易坏。

如果你只想把一个文本区域放在标签旁边,肯定有更简单的方法可以做到吗?