границы радиуса ошибка на <a> в IE9

Question

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

Есть ли известное обходное решение?

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

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

Решение состоит в том, чтобы вложить градиент внутри другого элемента с радиусом границы И наложением. Это меньше идеала, но все его 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> 

Answer 5

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

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

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