Я делаю макет с divs, уложенными друг на друга для верхней навигации/баннера. Макет отлично выглядит в Firefox/Chrome/Opera, но в IE есть места под каждым div в верхней навигации.IE - непреднамеренное вертикальное пространство в промежутках между divs
Я попытался использовать «clear: left» для каждой новой строки в надежде, что он удалит пробелы, но это не сработало. Любая помощь будет оценена по достоинству.
URL: Maggio Layout
Вы упускаете много существенной HTML, начиная с действующим DOCTYPE. Когда у вас будет эта существенная разметка, многие (если не все) ваши ошибки могут исчезнуть. Вы можете проверить разметку, посетив службу 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>
Попробуйте удалить эти пустые дивы, если они не нужны. Если они необходимы, установите для всех строк высоту, размер шрифта и отступов значение 0.
IE действительно странно в том, что между метками существуют пробелы (например, между закрывающим div и следующим открывающим тегом). Также у вас есть тег для закрытия сирот в вашем филафте.
Вы никогда не получите IE, чтобы попытаться выполнить как другие гораздо более современные браузеры без надлежащего doctype. Поместите это на первой линии и посмотреть, где мы находимся:
Отсутствие действительного заявления DOCTYPE приводит к IE для отображения страницы в режиме совместимости. В результате, по какой-то причине, некоторая версия ужасного three pixel bug 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>
С любым везением, всплывающие окна на каждой странице будет получить их либо обновления или дать при посещении вашего сайта полностью.
Вам нужно выучить HTML! –
Да. Настройка doctype и т. Д. У меня просто не было ни одного из них, потому что мне придется преобразовать его в Dot Net Nuke, который позже заставит меня удалить все это. Я выучил свой урок на весь день. Всем спасибо. –