проблемы с радиусом границы в IE 9, 8, 7

Question

Я приложил изображение ниже меню, которое я использую для своего сайта, кроме IE, все другие браузеры выводят правильный вывод:

Даже вВ IE9 эффект наведения должен быть пышным, но он имеет прямоугольный эффект.

Firefox, Safari и Chrome отлично работают:

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;
    border-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ищу такое же поведение как firefox, chrome и safari

Answer 1

Взгляните на проект CSS3 PIE . Это сделает различные функции CSS3 доступными в IE 6-9; включая закругленные углы.

Answer 2

Фильтр градиента в Internet Explorer не обрезается border-radius в Internet Explorer 9. Единственное решение, которое я могу придумать, заключается в использовании внутреннего элемента <div> с примененным градиентом:

<nav>
  <ul>
    <li>
      <div class="gradient">Home</div>
    </li>
  </ul>
</nav>

Примените border-radius к элементу <li> и градиент к <div class="gradient">.Это должно дать правильный результат.

Единственный другой вариант, как упоминал Салман А, это CSS3 PIE , который обходит эту проблему для вас и реализовать border-radius в более старых версиях IE.Я использую это в нескольких проектах, и это работает очень хорошо.

Answer 3

Twitter Bootstrap делает следующее, чтобы решить эту проблему:

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);

Answer 4

1001 * попробовать *

.class {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

просто быстрый пример