2011-03-30 132 views
0

我有一个导航菜单中的链接的悬停状态看起来像这样,圆角没有JavaScript或CSS3

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> 
+3

他们无法从IE6升级?只需下载Firefox!这是IE *迄今为止最先进的版本! – Blender 2011-03-30 15:01:19

+1

我不认为你可以用CSS来做IE6。你将不得不使用图像。 – LostLin 2011-03-30 15:02:34

回答

5

来实现这一目标的技术称为推拉门。详细了解它here
它基本上是在两个元素(门的两个部分)上使用图像。一个在左侧,另一个在右侧。

+0

jinx:p你快了47秒 – scrappedcola 2011-03-30 15:04:33

+0

呵呵,幸运我:P – Damb 2011-03-30 15:05:56

0

这可能不适合你,但如果你需要圆角和所有四个边角均相同的半径,你可以把它与CSS3 PIE工作:

http://css3pie.com/

再次,这只适用于如果所有你的角落是相同的半径。

0

如果您将JavaScript视为选项的唯一原因是因为您认为JavaScript框架不支持IE6,那么您是否已签出RaphaelJS(http://raphaeljs.com/)?

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

1

您也可以尝试对IE6这个css3pie哪些广告CSS3标签的支持,IE8