2011-03-30 133 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