Chrome 中的子菜单定位错误

发布于 2024-11-01 10:17:31 字数 2042 浏览 1 评论 0原文

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

Submenu arrow located前述在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--*/

您可以看到此处演示。

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

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

原文

This is what I want (and what works in Firefox and IE). The arrow image is positioned correctly on the right side of the menu item:

Submenu arrow positioned correctly in Firefox and IE

But this is what it looks like in Chrome:

Submenu arrow NOT positioned correctly

<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"> </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"> </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--*/

You can see the demo here.

I noticed that adding an empty img tag does the trick in Chrome, but I don't think is the proper solution.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

弱骨蛰伏 2024-11-08 10:17:31

您可以尝试以下操作：

将移至内。
从 ul.tabbed li span 中删除 float。
将 display:inline-block 添加到 ul.tabbed li span 并将 height 降至 27px。

http://jsfiddle.net/ambigously/ekZEw/

你可能需要稍微摆弄一下 CSS多一点以获得您想要的精确视觉外观。

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

回复收藏 0 原文

别靠近我心 2024-11-08 10:17:31

我稍微调整了你的代码，它可以工作（在 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 /显示/

I tweaked your code a little, and it works (in Chrome): http://jsfiddle.net/u9NZn/3/.

Here's a few changes I made:

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;
}

Demo: http://fiddle.jshell.net/u9NZn/3/show/

回复收藏 0 原文

~没有更多了~