У меня есть основное меню, сделанное из горизонтально выровненного списка (<li>), каждый из которых содержит изображение значка и некоторый текст:
Один из <li> содержит дополнительное изображение с display: none; так что значок может быть переключен (от зеленого до красного перца, в этом примере). Проблема в том, что он не выравнивается правильно в некоторых браузерах, как показано на рисунке выше. Я понял, что в отличие от visibilty: hidden;, элемент с display: none; не должен влиять на положение любого другого элемента и должен отображаться так, как будто его нет?
Браузеры, где он не отображается правильно, - это Google Chrome и Safari, но только в MacOS (!?) И IE7 (я знаю, знаю...) в Windows. Каждая другая комбинация браузера/ОС, которую я тестировал, отлично работает.
Здесь HTML:
<ul class="menu">
<li><img alt="Green Pepper" src="/green.png">li</li>
<li><img alt="Green Pepper" src="/green.png">li</li>
<li><img alt="Green Pepper" src="/green.png">li</li>
<li id="change">
<img alt="Red Pepper" src="/red.png" style="display: none;">
<img alt="Green Pepper" src="/green.png">
li
</li>
<li><img alt="Green Pepper" src="/green.png">li</li>
</ul>
Здесь CSS:
.menu li {
cursor: default;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
list-style-type: none;
position: relative;
text-align:center;
margin: 0 0 0 -25px;
padding: 8px 0 0 0;
width: 144px;
height: 35px;
display: inline-block;
background-image: url(../bct-white.png);
background-repeat: no-repeat;
color: #0091c1;
}
И для изображений значков:
.menu img {
display: inline;
vertical-align: -25%;
padding-right: 6px;
}
Я также должен был включить браузер для IE7, потому что он не распознает встроенный блок, исходящий из отдельной таблицы стилей на основе условного импорта (<!--[if lte IE 7]>):
.menu li {
zoom: 1;
display: inline;
}
Хотя, очевидно, что стиль не загружается в Chrome и Safari независимо от ОС, поэтому не может быть причиной моей проблемы на компьютерах Mac.
Я знаю, что самым быстрым решением было бы рефакторинг HTML и JavaScript манипуляции с отображением/скрытием значков, но мне очень хотелось бы знать, что вызывает эту проблему и как ее решить.
Обновить
Я отследил причину. В принципе, стиль элемента display: none; на элементе <img> переопределяет .menu img inline из .menu img. Удалив это, переключение между block и inline позволяет воспроизвести проблему. Очевидно, это ошибка браузера, и пока элемент не отображается, поскольку элемент в строке или блоке не должен влиять на макет.
jsFiddles
Проблема с Chrome и Safari только на компьютерах Mac
Проблема с дополнительным CSS для IE7 только
Заметка! Для меня страница Fiddle неправильно загружалась с использованием IE7, но прямая ссылка для результата iFrame - http://fiddle.jshell.net/z4dU7/3/show/
Обновление Bounty !!!
Я опубликовал одно исправление ниже, но на самом деле он вводит ту же макетную проблему в IE9! Пожалуйста, не стесняйтесь меняться или улучшать свой ответ - или приходите к столу с чем-то совершенно другим! :)
