Непредсказуемая горизонтальная позиция вложенного div в IE9 - PullRequest
Новая
       14

Непредсказуемая горизонтальная позиция вложенного div в IE9

1 голос
/ 26 мая 2011

Я ни в коем случае не эксперт HTML или CSS, но обычно я могу разобраться в логических вещах.Это поставило меня в тупик.

Я вложил div (предназначенный для переноса формы) в родительский div.Я установил его положение на абсолютное, а нижнее на ноль, чтобы оно отображалось внизу родительского элемента.Затем я указал поля, чтобы установить точный левый и нижний отступы, которые я хотел.

При предварительном просмотре в IE9 все работает нормально, но после того, как я загрузил и просмотрел в режиме он-лайн, IE9 отрисовал вложенный элемент div вправо.Выбор режима совместимости решил проблему.

Теперь я поместил вложенный div влево (в пределах родительского элемента), и проблема почитается.IE9 хорошо это читает, если я не выберу режим совместимости.

Это мой CSS: 

.wrapper {float:left; width:100%; height:380px;background-image:url(../images/top_bck.png); background-repeat: repeat-x; background-position: top;}

.box {position:absolute; top:40%; left:50%;width:832px; height:553px;   margin:-180px 0 0 -416px;background-image:url('../images/back.jpg'); background-repeat: no-repeat; background-position: bottom;}

.right { position:relative; float:right;width:580px; height:254px; text-align: left;padding:10px; margin-top:183px;}

.form {position:absolute;bottom:0; float:left; width:400px; padding:0px 0px 0px 36px; display:block; margin-bottom:4px;  }

Я предполагаю, что проблема в одном из отношений между классами, но я точно не могу его найти,Любая помощь будет с большим удовольствием получена.

Вот HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Site Coming Soon :: Company :: Company Description</title>
<link rel="shortcut icon" href="favicon.ico" />
<!-- Loads Master CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div class="wrapper">


<div class="box">
    <div class="content">



        <div class="right">
                <h2>Site coming soon.</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                <h3>Sed diam nonummy.</h3>Sed diam nonummy. Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad.
                <h3>Be informed:</h3>Enter your email address below and be notfied as soon as our site goes live.
                <div class="form">
                    <form id="form1" name="form1" method="post" action="">
                        <label>
                            <input type="text" name="emailForm" id="emailForm" />
                        </label>
                        <label>
                            <input type="submit" name="submitButton" id="submitButton" value="notify me" />
                         </label>
                    </form>
                </div>
        </div>
    </div>

</div>
<div class="footer">
    &copy; Company Ltd 2011. Company registered in England and Wales. Registered Company Number 0000000. 
</div>
</div>
</body>
</html>

1 Ответ

0 голосов
/ 29 сентября 2011

, глядя на CSS, я обнаружил, что хорошей аналогией является аналогия с картонными коробками. Я имею в виду, что вы начинаете с одной картонной коробки и помещаете другие коробки в большую. Если предполагаемые «внутренние» коробки слишком велики, они сломают первую коробку, и все выпадет из коробки.

Итак, моё первое наблюдение состояло бы в том, что высота вашей обертки установлена ​​на 380px, тогда как ваша коробка на 553px, это немедленно сломает вашу коробку.

Теперь мы переходим к сути проблемы: ваше понимание позиционирования в CSS - вы оставили свою обертку влево, я думаю, что ожидание того, что все внутри, станет на свои места в этой обертке.

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

Вам нужно будет изменить свое позиционирование на относительное и удалить высоту из вашей обертки, установив в ней блочную модель и разрешив позиционировать ваше авторское право относительно блоков, в которых оно находится рядом с вашим HTML.

надеюсь, это поможет

...