Странный разрыв между <div>элементами в IE, а не в FF или Opera

Question

Я знаю, что вопрос такого рода нужно задавать постоянно, но я пока не нашел решения своей проблемы.

При использовании FF, Opera и IE в Windows 7 (не помню, что это такое) страница выглядит точно так, как должна, но в IE7 в Windows Vista между моей панелью навигации и остальная часть страницы, которая откровенно заставляет это выглядеть глупо, и иллюзия страниц с вкладками теряется.

У меня есть таблица стилей сброса, чтобы сбросить все элементы, чтобы не было отступов, полей и т.д. ) это не так.

Вот 2 скриншота, показывающих проблему, первый из FF / Opera / IE в Windows 7:

Это из IE7 в Windows Vista:

альтернативный текст http://img43.imageshack.us/img43/7558/figarosiegap.jpg

А вот ссылка на реальный сайт, о котором идет речь: Ресторан Figaro's

Есть идеи у кого-нибудь?

Спасибо за ваше время.

Answer 1

Я сталкивался с этой проблемой несколько раз. Добавьте это к вашему CSS:

#header img { vertical-align: bottom }

Есть странная ошибка в IE вплоть до версии 7 включительно, когда он будет обрабатывать некоторые пробелы (на самом деле пустой текстовый узел) как реальный текстовый узел и выравнивать изображение, как если бы в элементе также был текст.

Другой вариант - объявить изображение как элемент уровня блока:

   #header img { display: block }

Этот CSS безопасно добавлять в ваш глобальный файл, он не будет влиять на то, как другие браузеры отображают страницу.

Answer 2

Я сталкивался с этой проблемой тысячу раз, и, наконец, после использования слишком сложного исправления после исправления, ответ прост! (По крайней мере, когда задействованы <img>.) В div, который создает пробел под ним, добавьте 'overflow: hidden;' к его css; вам нужно будет установить его высоту, конечно. Таким образом, если ваш div имеет высоту 39px, это будет держать его на уровне 39px, игнорируя дополнительные пробелы, которые IE любит помещать в <img> s

Надеюсь, это поможет.

Answer 3

Пробел является частью текстовой строки, в которой находится изображение меню, поскольку изображение является встроенным элементом, поэтому оно размещается на базовой линии текстовой строки. Разрыв - это расстояние от базовой линии текста до нижнего края строки, то есть пространство, используемое для подвешивания таких символов, как «g» и «j».

Простое добавление display:block; к стилю изображения решает проблему. Он превращает элемент изображения из встроенного элемента в элемент блока, чтобы он размещался не на базовой строке текста, а как отдельный элемент.

Answer 4

IE на Windows 7 - это IE8

Я посмотрел на него с помощью IE7, и разрыв кажется из-за изображения в div 'header'. Если вы посмотрите на него с помощью такого инструмента, как панель инструментов IE Developer, вы сможете увидеть границы вокруг объектов на странице.

Извините, я не могу вставить изображение, но я постараюсь описать его: после изображения есть элемент #text, который IE7 переносит на новую строку. если вы измените стиль на IMG, чтобы включить плыть налево; Это решает проблему для меня.

Надеюсь, это поможет! (Дайте мне знать, если вам нужно больше ясности)

Answer 5

Джейсон прав, что это ошибка в том, как IE обрабатывает пробелы в html ... рассматривая его как текстовый узел. Хотя я не думаю, что это уникально для изображений. Я думаю, что я видел такое поведение с divs. В качестве глобального изменения вы можете попробовать применить вертикальное выравнивание: снизу как к изображениям, так и к элементам div. Хотя я не знаю, какой это может привести к хаосу.

Но быстрое и грязное решение состоит в том, чтобы просто удалить пробел. Что-то вроде отстой, но меняй что-то вроде этого:

<img src="blah" alt="" width="5" height="5" />

<div>blorg</div>

К этому:

<img src="blah" alt="" width="5" height="5"

/><div>blorg</div>

Я предупреждал, что это быстро и грязно. Но это работает.

Answer 6

У разных браузеров разные поля и отступы по умолчанию. В этом случае, я предполагаю, что настройки IE7s сбивают вас с толку. Есть два основных решения проблемы. Вы можете установить свои собственные поля и отступы в html, уровне тела:

html, body {
    margin: 0;
    padding: 0;
}

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

Answer 7

В этом вопросе не так много полезной информации (html или картинки, которые работают). Итак, вот случайное предположение.

У меня были ситуации, когда разрыв строки или пробелы между элементами могут вызывать вертикальное пространство между элементами. Попробуйте разместить закрывающий и открывающий теги рядом друг с другом и посмотрите, исправит ли это проблему.