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

У меня проблемы с 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>

17.08.2008 19:10:28
7 ОТВЕТОВ
РЕШЕНИЕ

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

3
17.08.2008 19:12:09

Решение:

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

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

0
17.08.2008 19:12:51

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

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

0
17.08.2008 19:16:03

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

0
17.08.2008 19:23:49

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

0
17.08.2008 19:25:43

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

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

0
17.08.2008 20:20:50

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

#middle { font-size: 0; line-height: 0; }
0
18.08.2008 04:28:37