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

StackOverflow https://stackoverflow.com/questions/13851

  •  08-06-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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

Другие советы

Решение: 

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

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

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

Панель инструментов IE для разработчиков обязательна, но поможет ли она вам в устранении проблем с одним пикселем - маловероятно.

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

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

Решение... отобразить:блок

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

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

#middle { font-size: 0; line-height: 0; }
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top