IE9, очевидно, способен обрабатывать закругленные углы, используя стандартное определение CSS3 border-radius
.
Как насчет поддержки радиуса границы и градиента фона? Да, IE9 должен поддерживать их обоих по отдельности, но если вы смешаете эти два, градиент кровоточит из закругленного угла.
Я также вижу странность с тенями в виде сплошной черной линии под прямоугольником с закругленными углами.
Вот изображения, показанные в IE9:
Как я могу обойти эту проблему?
internet-explorer-9
gradient
compass-sass
css
SigmaBetaTooth
источник
источник
Ответы:
Вот одно решение, которое добавляет градиент фона, используя URI данных для создания полупрозрачного изображения, которое перекрывает любой цвет фона. Я проверил, что он правильно обрезан до радиуса границы в IE9. Это легче, чем предложения, основанные на SVG, но, как недостаток, не зависит от разрешения. Еще одно преимущество: работает с вашим текущим HTML / CSS и не требует переноса с дополнительными элементами.
Я взял случайный PNG с градиентом 20х20 с помощью веб-поиска и преобразовал его в URI данных с помощью онлайн-инструмента. Результирующий URI данных меньше, чем CSS-код для всего этого SVG-беспорядка, тем более сам SVG! (Вы можете применить это условно к IE9, только используя условные стили, специфичные для браузера классы CSS и т. Д.) Конечно, создание PNG отлично подходит для градиентов размером с кнопку, но не для градиентов размера страницы!
HTML:
CSS:
источник
background-size: 100% 103%; background-position:center;
лучше. 100% для обоих значений добавляет странную границу сверху и снизу.Я также работал с этой проблемой. Другое «решение» - добавить элемент div вокруг элемента с градиентом и закругленными углами. Сделайте для этого div одинаковые значения высоты, ширины и закругленного угла. Установите переполнение скрытым. Это в основном просто маска, но она работает для меня.
HTML:
CSS:
источник
Я думаю, что стоит упомянуть, что во многих случаях вы можете использовать вставку box-shadow, чтобы «подделать» эффект градиента и избежать уродливых краев в IE9. Это особенно хорошо работает с кнопками.
Смотрите этот пример: http://jsfiddle.net/jancbeck/CJPPW/31/
источник
box-shadow: inset 0 -8px 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);
Вы также можете использовать CSS3 PIE для решения этой проблемы:
http://css3pie.com/
Конечно, это может быть излишним, если вы просто зависите от одного элемента с закругленными углами и градиентом фона, но это вариант, который стоит рассмотреть, если вы включаете ряд общих функций CSS3 на своих страницах и хотите легкую поддержку для IE6 +
источник
Я столкнулся с этой ошибкой тоже. Мое предложение будет использовать повторное фоновое изображение для градиента в ie9. IE9 правильно размещает изображение за закругленными границами (начиная с RC1).
Я не вижу, как написать 100 строк кода для замены одной строки CSS просто или элегантно. SVG - это круто и все такое, но зачем проходить через все это, когда более простые решения для градиентного фона существуют годами.
источник
Я также застрял в той же проблеме и обнаружил, что IE не может одновременно визуализировать радиус границы и градиент, оба конфликтуют, единственный способ решить эту головную боль - удалить фильтр и использовать градиент через код SVG, только для IE ..
Вы можете получить код SVG, используя их код цвета градиента, от Microsoft на этом сайте (специально для градиента в SVG):
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
наслаждаться :)
источник
Просто используйте обертку div (округленный и скрытый переполнение), чтобы обрезать радиус для IE9. Простой, работает кросс-браузер. SVG, JS и условные комментарии не нужны.
источник
Эта запись в блоге помогла мне: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-ounded-corners/
По сути, вы используете условный комментарий для удаления фильтра, а затем создаете SVG-«спрайты» градиентов, которые вы можете использовать в качестве фоновых изображений.
Просто и элегантно!
источник
url()
вызовах изображений CSS . Остается только один, поэтому отбросьте 1000 условных выражений и подайте SVG для bg на всех поддерживающих его. Для всех остальных подайте растрёпанное изображение. Тогда этот взлом становится управляемым.IE9 правильно обрабатывает границы и радиус. Проблема в том, что IE9 отображает фильтр в дополнение к градиенту. Чтобы правильно решить эту проблему, нужно отключить фильтры в объявлениях стиля, которые используют свойство фильтра.
В качестве примера того, как лучше всего решить эту проблему:
У вас есть класс кнопок в вашей основной таблице стилей.
В условной таблице стилей IE9:
Пока таблица стилей IE9 упоминается в вашей голове после вашей основной таблицы стилей, это будет работать отлично.
источник
Существует простой способ заставить его работать под IE9 только с одним элементом.
Посмотрите на эту скрипку: http://jsfiddle.net/bhaBJ/6/
Первый элемент устанавливает границу-радиус. Второй псевдоэлемент устанавливает градиент фона.
Несколько ключевых инструкций:
Объявление базового элемента выглядит примерно так:
Декларация псевдоэлемента:
источник
Я решил отключить IE9 от закругления углов, чтобы обойти эту ошибку. Это чистый, легкий и универсальный в использовании.
источник
Div маска в IE9 это хорошая идея. Я предоставляю полный код, чтобы помочь немного уточнить. Хотя я не доволен обёртыванием кнопки в DIV, я думаю, что это легче понять, чем встраивание маски PNG или выполнение всех усилий с использованием SVG. Возможно, IE 10 будет правильно его поддерживать.
источник
Делал это со мной, и как только я убрал линию «фильтр:», кровотечение ушло. Плюс я использую пирог.
Вылеты:
Не кровоточит:
Быстрое исправление тени IE:
}
источник
Вы можете использовать тень для достижения градиента, и собирается работать в Internet Explorer 9 с
border-radius
Что-то вроде этого:
источник
Не уверен, что это единственное или верное решение, но ...
Я обнаружил, что при условии, что радиус границы больше, чем ширина границы, я не столкнулся с проблемой. Когда они были одинаковыми, я получал квадратные углы.
источник
Используя компас и sass, вы можете легко добиться этого следующим образом:
Компас сгенерирует изображение SVG для вас.
вот так:
}
}
источник
Работает для меня...
CSS
источник