Css проблема для IE8 - нечетное пространство, появляющееся между 2 div в заголовке

Question

Вы можете просмотреть проблему на:

http://www.caterinaligato.com/

Мы не можем воспроизвести проблему на IE7 или любой из версий Firefox.Использование DeveloperTool в IE8 показывает, что заполнение находится внутри <div id="bannerArea">, однако мы пробовали #bannerArea * { padding:0; margin:0; display:block; }, и это не помогло.

Обратите внимание, что «Просмотр совместимости» отключен.1010 *

Если кто-нибудь посоветует, это было бы здорово!

Answer 1

Начните с добавления overflow: hidden; в ваш класс BannerArea.Я не убежден, что взлом звезды также является лучшим вариантом.Я бы посоветовал удалить его, пока не будет доказано, что он вам абсолютно необходим.

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

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

Answer 2

Я почти уверен, что это происходит из-за вашего выпадающего меню. Если вы добавите переполнение: скрытый для вас div «bannerArea», то пустое пространство исчезнет, ​​но размещение будет разрушено. Когда добавлено переполнение: скрыто в "nv" div, изображение вернулось на свое место. Итак, вы позаботились о выпадающем меню. Возможно, вы можете использовать раскрывающийся список скриптов вместо чистого CSS?

Answer 3

использовать float: влево для "bannerArea" это уменьшит пробел в IE8, но позиция будет двигаться вправо, нужно сбросить позицию.