Ошибка пограничного радиуса в <a>в IE9

Увидев, что элементы <div> отображают границы границы/границы, правильно, но любые <a> или <button>, которые имеют набор фона, границы и радиуса границы, показывают цвет фона или изображение как квадрат, и только граница круглая. Пробовал настройки <a> и <button> до display: block или display: inline-block, но это не сработало.

Существует ли известное обходное решение?

Вот ссылка на вычисленный стиль из Webkit: https://gist.github.com/773719

Вот вычисленный стиль из инструментов IE9 dev:

Обновление Использование фильтра:; или -ms-filter:; свойство, чтобы иметь градиенты в IE, выдает фон из заданного граничного радиуса.

Ответ 1

Я нашел эту отличную запись в блоге, которая показывает, как вы можете использовать спрайты SVG-градиента, чтобы исправить эту конкретную проблему: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

Ответ 2

Решение состоит в том, чтобы вложить градиент внутри другого элемента с радиусом границы И с перекрытием. Это меньше идеала, но его все css. нет хаков.

Кроме того, использование фонового изображения очень хорошо работает, например.

<div class="corner">
   <div class="grad">button</div>
</div>


<style>
.corner,
.grad{
   height:50px;
   width:250px;
   }
.corner{
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   overflow:hidden;
   }
.grad{
   border:1px #659300 solid;
   background: #659300; /* old browsers */
   background: -moz-linear-gradient(top, #659300 0%, #6F9B00 50%, #528200 51%, #6CA501 100%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#659300), color-stop(50%,#6F9B00), color-stop(51%,#528200), color-stop(100%,#6CA501)); /* webkit */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1cc00', endColorstr='#518e00',GradientType=0 ); /* ie */
   }
</style>

Ответ 3

Идя к этому. Градиент на основе "фильтра" на самом деле не является фоновым изображением, так как CSS3 градиенты это дополнительный слой. Очевидно, что команда IE не обрезала эти слои фильтра в закругленные углы. Странно, потому что довольно очевидно, что люди собираются создавать такие кнопки.

Сопоставление устаревших функций с новыми должно быть больно. Им может быть лучше всего реализовать градиенты в CSS. Я предпочел бы добавить префикс, чем добавлять устаревшие фильтры.

Ответ 4

Одним из решений для этого является использование CurvyCorners, решение для javascript. Он работает полностью до IE6, но борется с градиентным фоном. Если вы используете цветной фон блока, но он будет работать отлично, и обработал все типы границ, которые я покачал на нем. Веб-сайт говорит, что вам нужно его вызывать, но каким-то образом я нашел, что он работает, просто включив .js и используя атрибуты border-radius css3 в css.

Ответ 5

Я использую Ultimate CSS Gradient Generator. Он рекомендовал использовать этот код для отключения фильтра в IE9:

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

Это должно решить вашу проблему.