Градиентное отклонение IE9 и фоновое gradleиентное кровотечение

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

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

HTML:

 This is a button 

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; } 

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

HTML:

 
 
 Content 
  

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 */ } 

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

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

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

http://css3pie.com/

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

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

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

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

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

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

наслаждаться 🙂

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

 
text or whatever
 .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 */ } 

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

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

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

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

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

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

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

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

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

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

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

• родитель должен иметь относительную или абсолютную позицию
• родитель должен иметь переполнение: скрыто ; (для того, чтобы эффект пограничного радиуса был видимым)
• :: before (или :: after) псевдоэлемент должен иметь z-индекс: -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 ); } тем .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 ); } 

Я решил отключить IE9 от закругления углов, чтобы обход этой ошибки. Он чист, прост и универсален.

 { border-radius:10px; border-radius:0px \0/; background:linear-gradient(top , #ffeecc, #ff8800); /* ... (-moz -ms,-o, -webkit) gradients */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffeecc,endColorstr=#ff8800); } 

Маска div в IE9 – хорошая идея. Я поставляю некоторый полный код, чтобы немного разъяснить. Хотя я не доволен обертыванием кнопки в DIV, я думаю, что это легче понять, чем внедрить маску PNG или пройти все усилия с помощью SVG. Возможно, IE 10 будет поддерживать его должным образом.

 background: #4f81bd; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmODFiZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4YWJiZDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, #4f81bd 0%, #8abbd7 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4f81bd), color-stop(100%,#8abbd7)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* IE10+ */ background: linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f81bd', endColorstr='#8abbd7',GradientType=1 ); /* IE6-8 */ 

Делал это со мной, и как только я удалил линию «фильтр:», кровотечение исчезло. Плюс я использую PIE.

Вылеты:

  background: #8abbd7; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */ background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8abbd7', endColorstr='#4f81bd',GradientType=0 ); /* IE6-8 */ -pie-background: linear-gradient(#8ABBD7, #4f81bd); behavior: url(../PIE/PIE.htc); 

Не кровоточит:

  background: #8abbd7; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */ background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */ -pie-background: linear-gradient(#8ABBD7, #4f81bd); behavior: url(../PIE/PIE.htc); 

Quick IE Shadow Fix:

 fixBoxShadowBlur($('*')); function fixBoxShadowBlur(jQueryObject){ if($.browser.msie && $.browser.version.substr(0, 1) == '9'){ jQueryObject.each(function(){ boxShadow = $(this).css('boxShadow'); if(boxShadow != 'none'){ var bsArr = boxShadow.split(' '); bsBlur = parseInt(bsArr[2]) || 0; bsBlurMeasureType = bsArr[2].substr(("" + bsBlur).length); bsArr[2] = (bsBlur * 2) + bsBlurMeasureType; $(this).css('boxShadow', bsArr.join(' ')); } }); } 

}

Вы можете использовать тень для достижения gradleиента и будете работать в Internet Explorer 9 с border-radius

Что-то вроде этого:

 box-shadow: inset 0px 0px 26px 5px gainsboro; 

Не уверен, что это был один или действительный обходной путь, но …

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

Используя компас и сасси, вы можете легко достичь этого так:

 @import "compass"; #border-radius { @include border-radius('RADIUS'px); } #gradiant{ $experimental-support-for-svg: true; @include background-image(linear-gradient('COLOR') %,('COLOR') %,...; } 

Compass создаст для вас SVG-изображение.

вот так:

 #gradiant { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9InRvIiB5MT0iYm90dG9tIiB4Mj0idG8iIHkyPSJ0b3AiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwODJhMmUiLz48c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0icmdiYSg4LCA0MiwgNDYsIDAuNzYpIi8+PHN0b3Agb2Zmc2V0PSI0MyUiIHN0b3AtY29sb3I9InJnYmEoNywgNDMsIDQ3LCAwLjcxKSIvPjxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSJyZ2JhKDQsIDQ0LCA1MCwgMC41OCkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDJjMzIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #082a2e), color-stop(35%, rgba(8, 42, 46, 0.76)), color-stop(43%, rgba(7, 43, 47, 0.71)), color-stop(58%, rgba(4, 44, 50, 0.58)), color-stop(100%, #042c32)); background-image: -webkit-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%); background-image: -moz-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%); background-image: -o-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%); background-image: linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%); 

}

 /* line 28, ../sass/boxshadow.scss */ #border-radius { -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; 

}

Работает на меня…

 

	

		

		

	
 	
	


	
Градиенты в Internet Explorer 9
Параметры X-Frame-Allow - из нескольких доменов
Как отключить защищенный режим в Internet Explorer 9?
Какую техническую причину Microsoft дал для Internet Explorer 9 в Windows XP?
Размер фона с SVG в IE9-10
Видео в Facebook не воспроизводятся с помощью IE9 и Flash Player
css3 text-shadow в IE9
Как заставить IE открывать JavaScript как текст
локальное хранилище в IE9 сбой при доступе к веб-сайту непосредственно из файловой системы
IE9 jQuery AJAX с CORS возвращает «Доступ запрещен»
Как отключить горячие клавиши в Internet Explorer 9?
	



  
Можно ли установить переменные ENV для среды разработки rails в моем коде?
  
разработать и несколько «пользовательских» моделей