IE - непреднамеренное вертикальное пространство между Div - PullRequest
1 голос
/ 18 декабря 2009

Я делаю макет с элементами div, расположенными друг над другом для верхней навигации / баннера. В Firefox / Chrome / Opera макет выглядит хорошо, но в IE в верхней части навигации есть пробелы под каждым div.

Я пытался использовать 'clear: left' для каждой новой строки в надежде, что это удалит пробелы, но это не сработало. Любая помощь будет оценена.

URL: Макет Maggio

Ответы [ 5 ]

4 голосов
/ 18 декабря 2009

Вам не хватает большого количества необходимого HTML-кода, начиная с правильного типа документа. После того как вы установите эту существенную разметку, многие (если не все) ваши ошибки могут исчезнуть. Вы можете проверить свою разметку, посетив онлайн-сервис проверки w3c по адресу: http://validator.w3.org/

Используйте в качестве шаблона следующее:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Website Title Here</title>
  </head>
  <body>

    <!-- Body Content Here -->

  </body>
</html>
1 голос
/ 18 декабря 2009

IE действительно странно из-за наличия пробелов между тегами (например, между закрывающим тегом div и следующим открывающим тегом). Также у вас есть сирота, закрывающая тег в вашем филрайве.

0 голосов
/ 18 декабря 2009

Отсутствие действительного объявления DOCTYPE заставляет IE отображать страницу в режиме Quirks. В результате, по какой-либо причине, какая-то версия IE с ужасом трехпиксельная ошибка активна в полную силу и дополняет ваши DIV. Простое решение - просто указать DOCTYPE и надеяться, что никто не будет следить за IE6 или хуже. В противном случае это займет несколько специальных хаков. Например, вы можете добавить условный CSS, чтобы уменьшить поля на 6 пикселей, например:

<div id="wrapper">
 <div id="top"></div>
 <div id="philleft"><a href="#"><img src="philleft.jpg" alt="" /></a></div>
 <div id="philright"></a></div>
 <div id="philbelowleft"><img src="philbelowleft.jpg" alt="" /></div>
 <div id="philbelowright"></div>
 <div id="techleft" style="margin-top:-6px"><a href="#"><img src="techleft.jpg" alt="" /></a></div>
 <div id="techright" style="margin-top:-6px"></div>
 <div id="techbelowleft"><img src="techbelowleft.jpg" alt="" /></div>
 <div id="techbelowright"></div>
 <div id="testleft" style="margin-top:-6px"><a href="#"><img src="testleft.jpg" alt="" /></a></div>
 <div id="testright" style="margin-top:-6px"></div>
 <div id="testbelowleft"><img src="testbelowleft.jpg" alt="" /></div>
 <div id="testbelowright"></div>
 <div id="locationleft" style="margin-top:-6px"><a href="#"><img src="locationleft.jpg" alt="" /></a></div>
 <div id="locationright" style="margin-top:-6px"></div>
 <div id="locationbelowleft"><img src="locationbelowleft.jpg" alt="" /></div>
 <div id="locationbelowright"></div>
 <div id="rightbanner"></div>
 <div id="content">
 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
 Lorem ipsum dolor sit amet, consectetur adipisit, incididunaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inlum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
 Lorem ipsum dolor sit amesed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </div>
 <div id="bottom"></div>
</div>

Просто не забудьте убедиться, что ваша реализация на самом деле будет условной. Или вы можете выбросить из окна всю книгу о современных методах кодирования и отформатировать страницу с таблицами вместо DIV и CSS. Таким образом, вы можете быть уверены, что все будет правильно выстраиваться, в то время как сторонники стандартов, читающие ваш код, хотят ударить его головой о кирпичную стену (что отсутствие у вас тегов doctype, html, head и body уже достигло превосходных результатов) , Если вы решите пойти по этому пути, я рекомендую прописать весь ваш HTML-код в верхнем регистре.

На вашем месте я бы просто указал тип документа и добавил следующий код на все ваши страницы:

<script>if (document.all && Number(navigator.userAgent.split("MSIE ")[1].split(";")[0])<7) alert("You are using an outdated version of Internet Explorer. Please update to version 7.0 or newer for the page to display properly.")</script>

Если повезет, всплывающие окна на каждой странице заставят их либо обновить, либо полностью отказаться от посещения вашего сайта.

0 голосов
/ 18 декабря 2009

Вы никогда не заставите IE попытаться работать так же, как другие, гораздо более современные браузеры, без правильного типа документа. Поместите это в свою первую строку и посмотрите, где мы находимся:

0 голосов
/ 18 декабря 2009

Попробуйте удалить эти пустые div, если они не нужны. Если они необходимы, установите для параметра line-height, font-size и padding значение 0.

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