css - 带 CSS 显示的元素 : none; breaking layout - causing misalignment

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 的浏览器 hack，因为它无法识别内联 block ，来自基于条件导入 (<!--[if lte IE 7]>) 的单独样式表:

.menu li {
    zoom: 1;
    display: inline;
}

不过，显然无论操作系统如何，该样式都不会在 Chrome 和 Safari 上加载，因此不会导致我在 Mac 上出现问题。

我知道最快的解决方案是重构 HTML 和图标显示/隐藏的 JavaScript 操作，但我真的很想知道导致此问题的原因以及如何解决它。

---

更新

我已经找到原因了。基本上，display: none; 的元素样式在 <img> 上元素覆盖 inline来自 .menu img规则。删除它，然后在 block 之间切换和 inline允许您重现问题。这显然是一个浏览器错误，虽然元素未显示为内联或 block 元素，但对布局应该没有影响。

---

jsFiddles

Issue with Chrome and Safari on Macs only

Issue with extra CSS for IE7 only

注意!对我来说，使用 IE7 无法正确加载 Fiddle 页面，但结果 iFrame 的直接链接是 http://fiddle.jshell.net/z4dU7/3/show/

赏金更新!!!

我在下面发布了一个修复程序，但它实际上在 IE9 中引入了相同的布局问题!请随时改进或改进我的答案 - 或者带着完全不同的东西来到桌面! :)

Answer 1

废方法和使用背景图像

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标签和实现的美学(图像)作为背景
2. 额外 span必须添加，因为 CSS2 只允许每个元素有 1 个背景图像
3. Li标签持有箭头背景； span 标签持有胡椒背景
4. 已更新 id="change"至 class="change" .除非您 100% 确定您将只有一个 #change 元素，否则请使用类。这纯粹是样式设计，它可以防止您在同一页面上有两个菜单列表。
5. 按如下方式稍微调整您的 CSS 样式:

删除了顶部填充并增加了高度。所以你的 li 元素是相同的高度但是然后添加了 line-height: 35px -> 这是垂直居中文本的最佳方式。使用顶部填充是可行的，但它很容易导致浏览器不一致。

更改 li float 的元素。 float 元素是对 IE7 最友好的方法!即使 IE6 也不会出错，但我没有那个旧版本来测试你的网页。仅供引用 - ul.menu 必须有 overflow: hidden清除 float 。

position: relative; 
cursor: default;

除非您更改了默认值，否则您可以将这两个属性保留在外面。游标应该是默认的。 Position: relative 是不必要的 - 你没有使用绝对定位或任何需要它的东西。现在，您可以将这些保留在您的声明中。我只是希望代码尽可能“ slim ”。

最后的话:

看看我的 CSS。注意我是如何使用 ul.menu 的在我所有的声明中。您可能想养成这样做的习惯；这为开发人员提供了一些关于 HTML 外观的见解，更重要的是 - 如果您决定添加 <div class=menu>，您的 css 将不会被覆盖。稍后的。具体.menu img将应用于菜单 div 中的任何图像标签。

好的 - 就是这样。如果有任何说明，请告诉我。

仅供引用 - 看到这个问题有赏金，如果你向我提供背景图片，我可以完善我的代码以满足你的需求 100% - 也许在你的答案的编辑中上传它们。