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。

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

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

Answer 1

我稍微调整了一下你的代码，它可以运行（在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/

Answer 2

你可以试试这个：

• 移动<span></span>内的<a>。
• 从float。{/ li>中删除ul.tabbed li span
• 将display:inline-block添加到ul.tabbed li span，然后将height放到27px。

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

你可能需要更多地使用CSS来获得你想要的精确视觉外观。

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