2012-12-15 44 views
0

我使用malsup的jQuery角落插件爲了在每個瀏覽器中都有圓角。到目前爲止 - 它對我有好處。但現在 - 事實並非如此。它根本不 - 我不知道如何描述它。IE7-8似乎沒有看到jQuery角落插件

也許你知道其他方式在舊的IE和現代瀏覽器上都有圓角?

HTML:

<nav id="mainMenu" class="container_24"> 
    <ul> 
     <li><a href="">One</a></li> 
     <li><a href="">Two ›</a></li> 
     <li><a href="">Three ›</a></li> 
     <li class="search"> 
      <form action=""> 
       <input type="text" placeholder="Search ›"> 
      </form> 
     </li> 
     <li><a href="">‹ Help</a></li> 
    </ul> 
</nav> 

CSS(LESS):

nav#mainMenu { 
    margin-top: -9px; 
    background: #fafafa; 
    height: 62px; 
    border-bottom: 3px solid #e2e2e2; 
    -webkit-box-shadow: 0px 0px 10px 0px rgba(000, 000, 000, 0.25); 
    box-shadow: 0px 0px 10px 0px rgba(000, 000, 000, 0.25); 

    ul { 
     list-style: none; 
     margin: 0; 
     padding: 0; 

     li:last-child { 
      a { 
       border: 0; 
      } 
     } 

     li { 
      float: left; 

      a, input { 
       display: block; 
       font: bold 12px/62px "Source Sans Pro", Arial, sans-serif; 
       color: #4b4b4b; 
       text-transform: uppercase; 
       padding: 0 20px; 
       border-right: 1px solid #e2e2e2; 
      } 
      a:hover, input:focus { 
       border-bottom: 3px solid #cc624a; 
       text-decoration: none; 
       outline: 0 
      } 

      form { 
       input { 
        border: 0; 
        border-right: 1px solid #e2e2e2; 
        height: 62px; 
        background: transparent; 
       } 
      } 
     } 
    } 
} 

JS:

$('nav#mainMenu').corner('5px'); 
$('nav#mainMenu ul li:first-child a').corner('5px bl'); 
$('nav#mainMenu ul li:last-child a').corner('5px br'); 

fiddle is here

+0

小提琴會幫助...插件是寫在IE8之前甚至存在或是相當新的 – charlietfl

+0

更新與小提琴和代碼。 –

+1

我的個人意見是,如果瀏覽器不支持圓角半徑用戶習慣了它,最好只用於那些支持它的瀏覽器,而不是添加不必要的js – charlietfl

回答

0

從我讀到的,jQuery Corners插件有像這樣的問題,有背景和邊框。所以,而不是這個,我使用CSS3 PIE,它很好。