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');
小提琴會幫助...插件是寫在IE8之前甚至存在或是相當新的 – charlietfl
更新與小提琴和代碼。 –
我的個人意見是,如果瀏覽器不支持圓角半徑用戶習慣了它,最好只用於那些支持它的瀏覽器,而不是添加不必要的js – charlietfl