I have attached the image below of the menu which i am using for my site , Apart from IE , all the other browsers renders the correct output :
Even in IE9 the hover effect should be curvy but it comes up with rectangular effect .
Firefox , safari , and chrome works fine :
Css
header nav {
padding:7px 0 10px 0;
}
header nav ul {
float:right;
padding:2px 0 0 0;
}
header nav ul li {
float:left;
padding-left:4px;
}
header nav ul li a {
position:relative;
float:left;
font-size:14px;
color:#fff;
text-decoration:none;
font-family: 'ColaborateThinRegular';
text-transform:uppercase;
height:32px;
line-height:32px;
background-color:#181717;
padding:0 36px 0 10px;
bor开发者_Python百科der-radius:17px;
-moz-border-radius:17px;
-webkit-border-radius:17px;
}
header nav ul li a:hover,
header nav ul li a.current {
background-image: -moz-linear-gradient(top, #E53088, #E530C1); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E53088),color-stop(1, #E530C1)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E53088', endColorstr='#E530C1'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E53088', endColorstr='#E530C1')"; /* IE8 */
border-radius:17px;
-moz-border-radius:17px;
-webkit-border-radius:17px;
}
I am looking for the same behaviour like firefox, chrome and safari
The gradient filter in Internet Explorer doesn't get clipped by the border-radius
in Internet Explorer 9. The only solution I can think of involves having an inner <div>
element with the gradient applied:
<nav>
<ul>
<li>
<div class="gradient">Home</div>
</li>
</ul>
</nav>
Apply the border-radius
to the <li>
element and the gradient to <div class="gradient">
. This should give the correct result.
The only other option, as Salman A mentioned, is CSS3 PIE, which work around this problem for you and implement border-radius
in older versions of IE. I'm using this in a couple of projects and it works very well.
Have a look at the CSS3 PIE project. It will make various CSS3 features available in IE 6 through 9; including rounded corners.
try
.class {
border-style: solid;
border-width: 2px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
just a quick example
Twitter Bootstrap does the following to solve this issue:
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
精彩评论