IE CSS Position Неправильно, есть идеи, почему? - PullRequest
Новая
       10

IE CSS Position Неправильно, есть идеи, почему?

0 голосов
/ 21 июля 2009

Я не могу понять, почему в следующем коде (большая страница со всеми ненужными удаленными частями) 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>

Ответы [ 3 ]

2 голосов
/ 21 июля 2009

Во-первых, 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;
}
2 голосов
/ 21 июля 2009

У вас есть поле размером 325px для div, оборачивающего текстовую область.

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 рендеринг содержит ошибки. На всякий случай, если это не очевидно, эта строка вызывает рендеринг IE7 ... 

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

Вы можете удалить Forced IE7, позволить IE8 нормально отображаться, а затем настроить CSS только для IE6 / 7. 

<!--[if lt IE 8]>
  <style type="text/css">
    div.storeProductFormInner div.storeProductChoices fieldset div{
      margin-left: 0px;
    }
  </style>
<![endif]-->
0 голосов
/ 21 июля 2009

Я бы не назвал это простым примером. У вас есть много абсолютных и относительных положений, а также создание промежутка в элемент уровня блока, который, в свою очередь, находится внутри встроенного элемента, который находится внутри относительно позиционированного элемента и так далее. Эти вещи имеют тенденцию ломаться.

Если вы просто хотите поместить текстовую область рядом с меткой, наверняка есть более простые способы сделать это?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...