Элемент с дисплеем CSS: нет; разрывные расположение - вызывают перекосы

Question

У меня есть основное меню, сделанные из горизонтально выровненного списка (<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 независимо от операционной системы, поэтому не может быть причиной моего вопроса на Маках.

Я знаю, что самым быстрым решением было бы рефакторинг HTML и JavaScript манипуляции с отображением/скрытием значков, но мне очень хотелось бы знать, что вызывает эту проблему и как ее решить.

---

Update

Я отслеживал дело вниз. В принципе, стиль элемента display: none; на элементе <img> переопределяет inline из правила .menu img. Снимая это, затем переключение между block и inline позволяет воспроизвести проблему. Очевидно, это ошибка браузера, и пока элемент не отображается, поскольку элемент в строке или блоке не должен влиять на макет.

---

jsFiddles

Issue with Chrome and Safari on Macs only

Issue with extra CSS for IE7 only

Примечание!Для меня страница Fiddle не загружалась должным образом с использованием IE7, но прямая ссылка для результата iFrame равна http://fiddle.jshell.net/z4dU7/3/show/

Bounty update !!!

Я разместил одно исправление ниже, но на самом деле он вводит ту же самую проблему размещения в IE9! Пожалуйста, не стесняйтесь меняться или улучшать свой ответ - или приходите к столу с чем-то совершенно другим! :)

Answer 1

Scrap подход и использование фоновых изображений

http://jsfiddle.net/P5CKC/2/

<ul class="menu"> 
    <li><span>Li</span></li> 
    <li><span>Li</span></li> 
    <li><span>Li</span></li> 
    <li class="change"><span>Li</span></li> 
    <li><span>Li</span></li> 
</ul> 

CSS

ul.menu { 
    overlflow: hidden; 
} 
ul.menu li { 
    float: left; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 10pt; 
    text-align:center; 
    margin: 0 0 0 -25px; 
    width: 152px; 
    line-height: 35px; 
    height: 35px; 
    background: url(../bct-white.png) no-repeat; 
    color: #0091c1; 
} 
ul.menu li span { 
    background: url(/green.png) no-repeat 5px 6px; 
    display: block; 
} 
ul.menu li.change span { 
    background-image: url(/red.png); 
} 

Совместимость с CSS2.0 и браузером

Приложение кода, которое я предоставил, является Css2.0 и должно легко работать в IE7 и выше.

1. Удалены img метки и implemmented эстетики (изображений) в качестве фона
2. Экстра span должны были быть добавлены, поскольку CSS2 позволяет только один фоновое изображение для каждого элемента
3. Ли тег содержит фон со стрелкой; span tag содержит перечный фон
4. Обновлено id="change" до class="change". ЕСЛИ вы на 100% уверены, что у вас будет только один элемент #change, используйте класс. Это чисто стилизация, и это мешает вам иметь два списка меню на одной странице.
5. Оптимального вашего CSS укладки немного следующим образом:

Удален верхний отступ и увеличил высоту. Таким образом, ваши элементы li имеют одинаковую высоту, но затем добавлены line-height: 35px -> это лучший способ вертикального центра текста. Утилизация верхнего заполнения работает, но она подвержена плохой несогласованности браузера.

Изменение li элементы для поплавков. Плавающие элементы - самый удобный для IE7 метод! Даже IE6 не будет ошибкой, но у меня нет этой старой версии, чтобы протестировать вашу веб-страницу. FYI - ul.menu должен иметь overflow: hidden, чтобы очистить поплавки.

position: relative; 
cursor: default; 

Если вы не изменили значения по умолчанию, вы можете сохранить эти два свойства. курсор должен быть по умолчанию. Позиция: относительная не нужна - вы не используете абсолютное позиционирование или что-либо, что оправдывает его потребность. Теперь вы можете сохранить их в своей декларации. Мне просто нравится код как «тонкий», насколько это возможно.

заключительные слова:

Взгляните на мой CSS. Обратите внимание, как я использовал ul.menu во всей своей декларации. Вы можете захотеть привыкнуть к тому же; это дает разработчику некоторое представление о том, как выглядит HTML и что более важно - ваш css не будет отменен, если вы решите добавить <div class=menu> позже. Специфически .menu img применим к любому тегу изображения в меню div.

Хорошо, все. Дайте мне знать, если есть какие-либо разъяснения.

FYI - видя, что у этого вопроса есть щедрость, если вы предоставите мне фоновое изображение, я могу отполировать свой код в соответствии с вашими потребностями на 100% - возможно, загрузить их в редактирование вашего ответа.