IE7: заголовок над меню

Question

У меня проблемы с IE7. У меня есть заголовок, который является IMG. Под ним у меня есть div, который представляет меню, они должны быть прикреплены друг к другу без пробела между ними. Оба имеют ширину 1000 пикселей. В Opera и FireFox заголовок и меню аккуратно привязаны друг к другу. Однако в IE7 есть небольшое пространство между меню DIV и IMG. Я попытался явно определить отступы и поля для IMG, однако это не работает. У меня была эта проблема раньше, так что, похоже, это причуда IE7.

Мой HTML-код:

<div id="middle">
  <img id="ctl00_headerHolder_headerImage" src="pictures/headers/header_home.jpg" style="border-width:0px;" />

  <div id="ctl00_menuPanel" class="menu">
    <a id="ctl00_home" href="Default.aspx" style="color:#FFCC33;">Home</a> |
    <a id="ctl00_leden" href="Leden.aspx">Leden</a> |
    <a id="ctl00_agenda" href="Agenda.aspx">Agenda</a> |
    <a id="ctl00_fotos" href="Fotos.aspx">Foto's</a> |
    <a id="ctl00_geschiedenis" href="Geschiedenis.aspx">Geschiedenis</a> |
    <a id="ctl00_gastenboek" href="Gastenboek.aspx">Gastenboek</a>
  </div>
</div>

Answer 1

Попробуйте панель инструментов разработчика IE, которая позволит вам проверить, что происходит с элементами, и даст вам общее представление об областях. Это может помочь вам лучше понять проблему.

Answer 2

Реальное решение:

#middle { font-size: 0; line-height: 0; }

Answer 3

Решение ... дисплей: блок

На этот вопрос нельзя ответить правильно, не зная режима рендеринга, в котором был браузер; вам нужно сообщить людям, какой у вас тип документа, если у вас есть проблемы с рендерингом CSS. Поведение изображения, на которое вы ссылаетесь, отличается в режиме причуд в отличие от режима стандартов. Минимальный контрольный пример должен включать полный HTML-документ и CSS для воспроизведения проблемы. Пожалуйста, не просите людей о помощи, не предоставляя им информацию, на которую они могут ответить, не теряя времени ...

Answer 4

Сброс CSS (например, YUI Reset CSS ) отлично подходит для такого рода вещей. Они сбрасывают отступы, поля и другие свойства отображения для многих элементов HTML, чтобы минимизировать различия в отображении.

Answer 5

Вместо того, чтобы прибегать к отображению блока, обратите внимание, что IE7 делает некоторые странные вещи с пробелами; попробуйте удалить пробел между изображением и div и посмотрите, что получится.

Answer 6

Я часто сталкиваюсь с этим. Вместо того, чтобы отыскивать конкретное поведение, попробуйте проверку работоспособности, установив свойства explicity и поля margin для селекторов img / div / etc, равные 0, установите стиль границы: нет border-width: 0px border = "0" и т. Д.

IE Dev Toolbar является обязательным условием, но вряд ли она поможет вам разобраться с проблемами с одним пикселем.

Answer 7

Решение:

img {
padding: 0px;
margin: 0px;
display: block;
}

дисплей: блок