#css #internet-explorer #html #internet-explorer-9 #alignment
#css #internet-explorer #HTML #internet-explorer-9 #выравнивание
Вопрос:
Я никоим образом не эксперт в 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">
amp;copy; Company Ltd 2011. Company registered in England and Wales. Registered Company Number 0000000.
</div>
</div>
</body>
</html>
Комментарии:
1. Добро пожаловать в Stack Overflow. Было бы полезно, если бы вы могли добавить свой HTML. Еще больше помогло бы, если бы вы могли создать тестовый пример jsFiddle или JS Bin .
2. Вот моя ссылка на doctype:<!DOCTYPE html PUBLIC «-//W3C //DTD XHTML 1.0 Transitional //RU» » w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd «>
3. добавлен HTML. Надеюсь, форматирование приемлемо.
4. Я поместил ваш код здесь — jsbin.com/uwuga4 . Как это должно выглядеть? Скриншот, вероятно, помог бы. Какие версии Internet Explorer вам необходимо поддерживать? Имейте в виду, что вы тестируете с IE9, но когда вы нажимаете «режим совместимости», это похоже на то, что вы используете IE7 (гораздо более глючный / старый браузер).
5. Этот jsbin отлично подчеркивает проблему. Нажмите кнопку просмотра совместимости, и форма переместится вправо. Я принимаю вашу точку зрения о более старом браузере с ошибками и могу не беспокоиться об этом. Однако, если бы существовал кроссбраузерный способ выравнивания этих элементов, я бы использовал его.
Ответ №1:
когда я смотрю на CSS, я нахожу хорошей аналогией аналогию с картонными коробками, под этим я подразумеваю, что вы начинаете с одной картонной коробки и размещаете другие коробки внутри большой. Если предполагаемые «внутренние» поля слишком большие, они сломают первое поле, и все выпадет из поля.
Итак, моим первым наблюдением было бы то, что высота ваших оберток установлена в 380 пикселей, где, поскольку ваш ящик равен 553 пикселям, это немедленно приведет к разрыву вашего ящика.
теперь мы переходим к сути проблемы ваше понимание позиционирования в CSS вы переместили свою оболочку влево, я думаю, ожидая, что все внутри встанет на свои места в этой оболочке.
Затем вы переходите к позиционированию абсолютных элементов, это по существу снимает контроль над позиционированием с того, чтобы быть относительно оболочки, которую вы переместили влево, теперь она находится в некоторой степени относительно верхнего левого угла вашего экрана (хотя это не совсем верно в каждом случае).
Вам нужно будет изменить ваше позиционирование на относительное и убрать высоту из вашей оболочки, исправив модель ящика и разрешив позиционирование вашего авторского права относительно полей, с которыми оно находится рядом в вашем HTML.
надеюсь, это поможет