Question

我有一个导航菜单，其中链接的悬停状态如下所示，

enter image description here

如您所见，橙色背景上有圆角背景。客户已要求通过IE6正常工作（他们还没有升级的阶段）。现在我最近进入了网络开发，所以我还没有学到实现这种效果的旧技术，有些人可以开心吗？下面是我的代码，目前我正在使用CSS3。

#navPrimary {
        background:#de4702;
        height:37px;
        margin:0px auto;
        width:517px;
        padding:5px 0px 0px 0px;
        display:block;
        overflow:hidden;
    }

        #navPrimary li {
            width:252px;
            float:left;
            display:block;
            height:100px;
            list-style-type:none;
            text-align:center;
            margin:0px 0px 0px 8px;
        }

            #navPrimary li.first {
                width:67px;
                padding:0px 14px 0px 14px;
                display:block;
                margin:0;
            }

            #navPrimary .last {
                width:154px;
            }

            #navPrimary li a {
                color:#fff;
                font-weight:bold;
                text-decoration:none;
                display:block;
                height:27px;
                padding:10px 0px 0px 0px;

            }

                #navPrimary li a:hover {
                    color:#de4702;
                    background:#fff;
                    -moz-border-radius:10px 10px 0px 0px;
                    -webkit-border-radius:10px 10px 0px 0px;
                    border-radius:10px 10px 0px 0px;
                }

<ul id="navPrimary">

      <li class="first"><a href="/" title="#request.sitename# | Home">Home</a></li>

      <li><a href="##" title="Free Admission">Free Admission </a></li>

      <li class="last"><a href="#request.public_vroot#index.cfm?fuseaction=game.terms" title="Terms &amp; Conditions">Terms &amp; Conditions</a></li>

    </ul>

Answer 1

实现这一目标的技术称为滑动门。阅读更多相关信息here 它基本上是在两个元素（门的两个部分）上使用图像..一个在左侧，另一个在右侧。

Answer 2

需要几个跨度和图像，但你可以使用css推拉门技术获得相同的效果。在此处查看此列表中的文章：http://www.alistapart.com/articles/slidingdoors/

Answer 3

你也可以试试这个css3pie广告css3标签支持IE6到IE8

Answer 4

这可能对您不起作用，但如果您需要圆角并且所有四个角都是相同的半径，您可以使用CSS3 PIE：

http://css3pie.com/

同样，这仅适用于全部您的角落半径相同的情况。

Answer 5

如果您将JavaScript视为一个选项的唯一原因是因为您认为JavaScript框架不支持IE6，那么您是否已经检查过RaphaelJS（http://raphaeljs.com/）？

RaphaelJS是一个图形库，支持所有主流浏览器包括 IE6。

Answer 6

你还可以看一下不需要图像或JavaScript的圆角的另一个纯CSS解决方案。 http://www.spiffycorners.com/

圆角没有javascript或css3

6 个答案: