我有一个基本菜单，由水平对齐的列表 ( <li>) 组成，每个列表都包含一个图标图像和一些文本：
其中一个<li>包含一个额外的图像，display: none;以便可以切换图标（在此示例中从绿色变为红辣椒。问题是它在某些浏览器上无法正确对齐，如上图所示。我的理解是，与 相比visibilty: hidden;，一个元素display: none;不应该影响任何其他元素的位置，并且应该呈现好像它不存在一样？
无法正确呈现的浏览器是 Google Chrome和Safari——但仅限于 Windows 上的MacOS（！？）和IE7（我知道，我知道......）。我测试过的所有其他浏览器/操作系统组合都可以正常工作。
这是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 的浏览器 hack，因为它无法识别来自基于条件导入 ( <!--[if lte IE 7]>) 的单独样式表的内联块：
.menu li {
zoom: 1;
display: inline;
}
虽然，很明显，无论操作系统如何，Chrome 和 Safari 都不会加载这种风格，所以不会在 Mac 上引起我的问题。
我知道最快的解决方案是重构图标的显示/隐藏的 HTML 和 JavaScript 操作，但我真的很想知道是什么导致了这个问题以及如何解决它。
更新
我已经查明原因了。基本上，元素display: none;上的元素样式<img>会覆盖inlinefrom.menu img规则。删除它，然后在两者之间切换block并inline允许您重现问题。这显然是一个浏览器错误，虽然元素未显示为内联或块元素，但对布局没有影响。
jsFiddles
笔记！对我来说，小提琴页面没有使用 IE7 正确加载，但结果 iFrame 的直接链接是http://fiddle.jshell.net/z4dU7/3/show/
赏金更新！！！
我在下面发布了一个修复程序，但它实际上在 IE9 中引入了相同的布局问题！请随时改进或改进我的答案 - 或以完全不同的方式来到桌面！:)
