IE9 границы-радиус и фоновый градиент кровотечения

Question

IE9, очевидно, способен обрабатывать закругленные углы, используя стандартное определение CSS3 border-radius.

Как насчет поддержки радиуса границы и градиента фона? Да, IE9 должен поддерживать их обоих по отдельности, но если вы смешаете эти два, градиент кровоточит из закругленного угла.

Я также вижу странность с тенями в виде сплошной черной линии под прямоугольником с закругленными углами.

Вот изображения, показанные в IE9:

Как я могу обойти эту проблему?

Answer 1

Я также работал с этой проблемой. Другое «решение» - добавить элемент div вокруг элемента с градиентом и закругленными углами. Сделайте для этого div одинаковые значения высоты, ширины и закругленного угла. Установите переполнение скрытым. Это в основном просто маска, но она работает для меня.

HTML:

<div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div>

CSS:

.mask
{
    overflow: hidden;
}

.roundedCorners
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient
{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}

Answer 2

Вот одно решение, которое добавляет градиент фона, используя URI данных для создания полупрозрачного изображения, которое перекрывает любой цвет фона. Я проверил, что он правильно обрезан до радиуса границы в IE9. Это легче, чем предложения, основанные на SVG, но как недостаток, не зависит от разрешения. Еще одно преимущество: работает с вашим текущим HTML / CSS и не требует переноса с дополнительными элементами.

Я взял случайный PNG с градиентом 20x20 с помощью веб-поиска и преобразовал его в URI данных с помощью онлайн-инструмента. Результирующий URI данных меньше, чем CSS-код для всего этого SVG-беспорядка, тем более сам SVG! (Вы можете применить это условно к IE9, только используя условные стили, специфичные для браузера классы CSS и т. Д.) Конечно, создание PNG отлично подходит для градиентов размером с кнопку, но не для градиентов размера страницы!

HTML:

<span class="button">This is a button</span>

CSS:

span.button { 
  padding: 5px 10px;
  border-radius: 10px;
  background-color: orange;  
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvUlEQVQ4y63VMQrDMAyF4d/BGJ+rhA4dOnTo0Kn3P4ExxnSoXVQhpx0kEMmSjyfiKAF4AhVoqrvqjXdtoqPoBMQAPAZwhMpaYkAKwH1gFtgG0v9IlyZ4E2BVabtKeZhuglegKKyqsWXFVboJXgZQfqSUCZOFATkAZwEVY/ymQAtKQJ4Jd4VZqARnuqyxmXAfiAQtFJEuG9dPwtMC0zD6YXH/ldAddB/Z/aW4Hxv3g+3+6bkvB/f15b5gXX8BL0z+tEEtuNA8AAAAAElFTkSuQmCC);
  background-size: 100% 100%;

  border: 2px solid white;
  color: white;
}

Answer 3

Думаю, стоит упомянуть, что во многих случаях вы можете использовать вставку box-shadow, чтобы «подделать» эффект градиента и избежать уродливых краев в IE9.Это особенно хорошо работает с кнопками.

См. Этот пример: http://jsfiddle.net/jancbeck/CJPPW/31/

Answer 4

Вы также можете использовать CSS3 PIE для решения этой проблемы:

http://css3pie.com/

Конечно, это может быть излишним, если вы просто зависите от одного элемента с закругленными углами иградиент фона, но это вариант, который стоит рассмотреть, если вы включаете ряд общих функций CSS3 на своих страницах и хотите легкую поддержку IE6 +

Answer 5

Я тоже столкнулся с этой ошибкой. Мое предложение будет использовать повторное фоновое изображение для градиента в ie9. IE9 правильно размещает изображение за закругленными границами (по состоянию на RC1).

Я не вижу, как написать 100 строк кода для замены одной строки CSS просто или изящно. SVG - это круто и все такое, но зачем проходить через все это, когда более простые решения для градиентного фона существуют годами.

Answer 6

Я также застрял в той же проблеме и обнаружил, что IE не может одновременно визуализировать радиус границы и градиент, оба конфликтуют, единственный способ решить эту головную боль - удалить фильтр и использовать градиент через svg-код, только для IE ..

Вы можете получить код SVG, используя их код цвета градиента, от Microsoft на этом сайте (специально созданный для градиента SVG):

http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

наслаждайся:)

Answer 7

Просто используйте div обертки (округленный и скрытый переполнение), чтобы обрезать радиус для IE9.Простой, работает кросс-браузер.SVG, JS и условные комментарии не нужны.

<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>

.ie9roundedgradient { 
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
}
.roundedgradient { 
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
/* use colorzilla to generate your cross-browser gradients */ 
}

Answer 8

Эта запись в блоге помогла мне: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

Обычно вы используете условный комментарий для удаления фильтра, а затем создаете SVG-«спрайты» градиентов, которые вы можете использовать в качестве фоновых изображений.

Просто и элегантно!

Answer 9

IE9 правильно обрабатывает границы и градиенты. Проблема в том, что IE9 отображает фильтр в дополнение к градиенту. Чтобы правильно решить эту проблему, нужно отключить фильтры в объявлениях стилей, в которых используется свойство фильтра.

В качестве примера того, как лучше всего решить эту проблему:

В основной таблице стилей есть класс кнопок.

.btn {
    background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}

В условной таблице стилей IE9:

.btn { filter: none; }

До тех пор, пока в вашей голове есть ссылка на таблицу стилей IE9 после вашей основной таблицы стилей, она будет отлично работать.

Answer 10

Существует простой способ заставить его работать под IE9 только с одним элементом.

Взгляните на эту скрипку: http://jsfiddle.net/bhaBJ/6/

Первый элемент устанавливает радиус границы. Второй псевдоэлемент устанавливает градиент фона.

Несколько ключевых инструкций:

• родитель должен иметь относительную или абсолютную позицию
• родитель должен иметь переполнение : скрыто ; (чтобы эффект границы-радиуса был видимым)
• :: before (или :: after) псевдоэлемент должен иметь z-index: -1 (обходной тип)

Объявление базового элемента выглядит примерно так:

.button{
    position: relative;
    overflow: hidden;        /*make childs not to overflow the parent*/

    border-radius: 5px;      /*don't forget to make it cross-browser*/

    z-index:2;               /*just to be sure*/
}

Декларация псевдоэлемента:

.button:before{

    content: " ";                     /*make it a node*/
    display: block;     

    position: absolute;               
    top:0;left:0;bottom:0;right:0;    /*same width and height as parent*/

    z-index: -1;                      /*force it to NOT overlay the TEXT node*/

    /*GRADIENT declarations...*/
    background: -ms-linear-gradient(top,  #ff3232 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232',endColorstr='#7db9e8',GradientType=0 );

}