< li>中的一个包含一个额外的图像与显示：无;使图标可以被切换(从绿色到红辣椒,在这个例子中.
问题是它在一些浏览器上没有正确对齐,如上图所示.我的理解是,与可见性相反：隐藏;一个显示：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添加浏览器,因为它不能识别来自基于条件导入(<！ - [if lte IE 7]>)的单独样式表的内联块)：
.menu li {
zoom: 1;
display: inline;
}
尽管很明显,无论操作系统如何,Chrome和Safari都无法加载样式,因此无法在Mac上导致我的问题.
我知道最快的解决方案是重构HTML和JavaScript对图标的显示/隐藏的操纵,但我真的很想知道导致此问题的原因以及如何解决它.
更新
我跟踪原因.基本上,显示的元素样式：none;在< img>元素从.menu img规则覆盖内联.删除它,然后在块和内联之间切换允许您重现问题.这显然是一个浏览器错误,而元素不是显示为一个in-line或block元素应该不会影响布局.
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/
赏金更新!!!
我在下面发布了一个修复,但它实际上在IE9中引入了相同的布局问题！请随意对我的答案进行改进或改进 – 或者与完全不同的东西来到桌子上:)
解决方法
<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,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及以上版本中工作.
删除img标签和实现美学(图像)作为背景
>额外的跨度必须添加,因为CSS2每个元素只允许1个背景图像
李标保持箭头背景; span标签保留胡椒背景
>将id =“change”更新为class =“change”.除非你确定你只有一个#change元素,使用一个类.这是纯粹的造型,它阻止您在同一页面上有两个菜单列表.
>调整你的CSS样式一点如下：
去除顶部填充并增加高度.所以你的li元素是相同的高度,然后添加line-height：35px – >这是垂直居中的文本的最佳方式.使用顶部填充工作,但它很容易导致浏览器不一致.
将li元素更改为浮点数.漂浮元素是最IE7友好的方法！即使IE6也不会出错,但是我没有旧版本来测试您的网页.FYI – ul.menu必须有溢出：隐藏以清除浮动.
position: relative; cursor: default;
除非您更改了默认值,否则可以保留这两个属性.光标应为默认值.位置：亲戚是不必要的 – 你没有使用绝对定位或任何需要保证的东西.现在,您可以将这些保留在您的声明中.我只是喜欢代码尽可能“苗条”.
最后的话：
看看我的CSS.注意我在所有声明中如何使用ul.menu.你可能想要做同样的习惯;这为开发人员提供了一些关于HTML看起来更加重要的洞察力 – 如果您决定添加< div class = menu>,则CSS将不会被覆盖.稍后的.特别的.menu img将适用于菜单div中的任何图像标签.
好吧 – 就是这样让我知道如果有任何澄清.
FYI – 看到这个问题有一个赏金,如果你提供我的背景图像,我可以抛光我的代码,以满足您的需求100％ – 也许上传他们在您的答案的编辑.
