Верхние углы изогнуты в IE на ссылке текущей страницы

Question

Может ли кто-нибудь помочь мне понять способ добавления закругленных углов в верхнем левом и правом верхнем углу текущей ссылки на странице ниже?Я использовал углы jQuery, но это не очень хорошо работает в IE ... Я хотел использовать PNG.Пространство между углами должно быть белым.PNG будет прозрачным, позволяя просвечивать любое изображение ниже.

<ul>
    <li class="current"><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Create Account</span></a></li>
    <li><a href="#"><span>Order a Catalogue</span></a></li>
    <li><a href="#"><span>Distributors</span></a></li>
    <li><a href="#"><span>About Us</span></a></li>
    <li><a href="#"><span>Contact Us</span></a></li>
    <li><a href="#"><span>Login</span></a></li>
</ul>

Любая помощь будет принята с благодарностью.

Answer 1

Привет, друг, чтобы применить радиус границы, который работает в IE, также вы должны применить файл border-radius.htc, и вы можете применить его к своему CSS, как этот.В моем проекте я использую его в теге Div, но вы можете использовать его везде, где захотите.

div
{
-moz-border-radius: 10px;
background: #D4D0C8;
border: 1px solid #808080;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
}

вы также найдете файл border-radius.htc в Google.Если вы можете предоставить свой emailid, тогда я могу отправить его вам, если вы хотите

Answer 2

Нарисуйте прямоугольник со скругленными углами в виде, подобном Paint.NET (убедитесь, что у вас прозрачный фон!) И задайте точную ширину LI.Присвойте ему более чем достаточную высоту, чтобы вы могли отрезать кнопку закругленными углами, и она все равно будет достаточно высокой, чтобы заполнить LI.Отрежьте нижние закругленные углы, обрежьте соответственно и сохраните как PNG.Установите его в качестве фонового изображения для элемента с помощью CSS ...

ul li.current {
  background:url(../images/nav-current.png) no-repeat;
}

Примечание: если вы используете цвет фона на LI, он будет проливаться сквозь прозрачную часть закругленных углов, чтоне хорошо.

Движение вперед ... вы можете просто использовать CSS3 border-top-left-radius и border-top-right-radius вместе с background-color (без изображений!), но они не поддерживаютсяв IE8 и старше.