Chrome 中的子菜单定位错误

Question

这就是我想要的（在 Firefox 和 IE 中有效）。箭头图像正确定位在菜单项的右侧：

但这就是它在 Chrome 中的样子：

<div id="main-nav">
    <ul class="tabbed">
        <li><a href="#">Link 1 (submenu)</a><span></span></li>                       
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>
<div class="clearer">&nbsp;</div>    

<div id="sub-nav" style="display:none;">

    <ul class="tabbed">
        <li><a href="#">Sublink 1</a></li>
        <li><a href="#">Sublink 2</a></li>
        <li><a href="#">Sublink 3</a></li>
        <li><a href="#">Sublink 4 </a></li>
    </ul>

    <div class="clearer">&nbsp;</div>

</div>    

CSS

ul.tabbed li {
    list-style: none;
    margin-top: 0;
}

ul.tabbed {
    display: inline;
    margin: 0;
}

ul.tabbed li {
    float: left;
}

ul.tabbed li span { /*--Drop down trigger styles--*/
   width: 17px;
    height: 35px;
    float: right;
    background: url("button.gif") no-repeat;
}

ul.tabbed li span.subhover {
    background: url("button-hover.gif") no-repeat; 
    cursor: pointer;
} /*--Hover effect for trigger--*/

你可以看到demo here。

我注意到在 Chrome 中添加一个空的 img 标签可以解决问题，但我认为这不是正确的解决方案。

<div id="main-nav">
<ul class="tabbed">
    <li><a href="#">Link 1 (submenu)</a><span></span> <img src="" /> </li> 

Answer 1

你可以试试这个：

• 将<span></span> 移动到<a> 中。
• 从ul.tabbed li span 中删除float。
• 将display:inline-block 添加到ul.tabbed li span 并将height 降低到27px。

http://jsfiddle.net/ambiguous/ekZEw/

您可能需要稍微修改 CSS 才能获得所需的精确视觉外观。

我认为将跨度移动到您希望它附加到的元素（锚点）内会产生比其他任何东西更可靠的结果。

Answer 2

我稍微调整了您的代码，它可以正常工作（在 Chrome 中）：http://jsfiddle.net/u9NZn/3/。

以下是我所做的一些更改：

ul.tabbed li span { /*--Drop down trigger styles--*/
    position: absolute;
    top: 0px;
    right: -1.5em;
    width: 17px;
    height: 35px;
    background: url("https://lh6.googleusercontent.com/_ds3R4wTBTl0/Tanu3Y5PHOI/AAAAAAAAAnU/STdJTpqNJHA/subnav_btn_top.gif") no-repeat;
}

ul.tabbed li {
    float: left;
    position: relative;
}

演示：http://fiddle.jshell.net/u9NZn/3/show/