반응형
IE9 경계 반경 및 배경 그라디언트 출혈
IE9는의 CSS3 표준 정의를 사용하여 둥근 모서리를 처리 할 수 있습니다 border-radius.
테두리 반경 및 배경 그라디언트 지원은 어떻습니까? 예 IE9는 둘 다 별도로 지원하지만 둘을 혼합하면 둥근 모서리에서 그라디언트가 번집니다.
둥근 모서리가있는 상자 아래에 그림자가 검은 색 선으로 표시되는 이상한 점이 있습니다.
IE9에 표시된 이미지는 다음과 같습니다.
이 문제를 어떻게 해결할 수 있습니까?
다음은 배경색을 오버레이하는 반투명 이미지를 만들기 위해 데이터 URI를 사용하여 배경 그라디언트를 추가하는 솔루션입니다. IE9에서 테두리 반경에 올바르게 클리핑되었는지 확인했습니다. 이것은 SVG 기반 제안보다 가볍지 만 단점은 해상도 독립적이지 않습니다. 또 다른 장점 : 현재 HTML / CSS에서 작동하며 추가 요소로 줄 바꿈 할 필요가 없습니다.
웹 검색을 통해 임의의 20x20 그라디언트 PNG를 가져 와서 온라인 도구를 사용하여 데이터 URI로 변환했습니다. 결과 데이터 URI는 모든 SVG 혼란에 대한 CSS 코드보다 작으며 SVG 자체보다 훨씬 적습니다! (조건부 스타일, 브라우저 별 CSS 클래스 등을 사용하여 IE9에만 조건부로 적용 할 수 있습니다.) 물론 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;
}
나는 또한이 문제로 일하고있다. 또 다른 "솔루션"은 그라디언트 및 둥근 모서리가있는 항목 주위에 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 */
}
많은 경우에 삽입 상자 그림자를 사용하여 그라디언트 효과를 "가짜"로 만들고 IE9에서 못생긴 가장자리를 피할 수 있다고 언급 할 가치가 있다고 생각합니다. 이것은 특히 버튼과 잘 작동합니다.
이 예를 참조하십시오 : http://jsfiddle.net/jancbeck/CJPPW/31/
CSS3 PIE를 사용하여이 문제를 해결할 수도 있습니다.
물론 둥근 모서리와 배경 그라디언트가있는 단일 요소에만 의존한다면 페이지에 많은 공통 CSS3 기능을 통합하고 쉽게 지원하려는 경우 고려하는 옵션입니다. IE6 이상
나는이 버그에 부딪쳤다. 내 제안은 ie9의 그라데이션에 반복적 인 배경 이미지를 사용하는 것입니다. IE9는 둥근 테두리 뒤에 이미지를 올바르게 바둑판 식으로 배열합니다 (RC1 기준).
CSS의 한 줄을 대체하기 위해 100 줄의 코드를 작성하는 것이 간단하거나 우아하다는 것을 알지 못합니다. SVG는 시원하고 모든 것이지만, 왜 그라디언트 배경에 대한 쉬운 솔루션이 수년 동안 있었을 때 모든 것을 통과해야합니까?
나는 또한 IE가 국경 반경과 그라디언트를 한 번에 둘 다 렌더링 할 수 없다는 것을 발견 한 동일한 문제에 갇혔다. 두 가지 충돌을 해결하는 유일한 방법은 필터를 제거하고 svg 코드를 통해 그라디언트를 사용하는 것입니다. IE 만 ..
이 사이트의 Microsoft에서 그라데이션 색상 코드를 사용하여 svg 코드를 얻을 수 있습니다 (특히 그라데이션을 위해 svg로 만들었습니다).
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
즐겨 :)
IE9의 반경을 자르려면 래퍼 div (반올림 및 오버플로 숨김)를 사용하십시오. 간단하고, 크로스 브라우저에서 작동합니다. 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 */
}
이 블로그 게시물이 도움이되었습니다 : http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
기본적으로 조건부 주석을 사용하여 필터를 제거한 다음 배경 이미지로 사용할 수있는 그라디언트의 SVG '스프라이트'를 만듭니다.
간단하고 우아한!
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 스타일 시트가 기본 스타일 시트 다음에 머릿속에서 참조되는 한 완벽하게 작동합니다.
IE9에서 단 하나의 요소로 작동하게하는 간단한 방법이 있습니다.
이 바이올린을 살펴보십시오 : http://jsfiddle.net/bhaBJ/6/
첫 번째 요소는 Border-Radius를 설정합니다. 두 번째 의사 요소는 배경 그라디언트를 설정합니다.
몇 가지 주요 지침 :
- 부모는 상대 또는 절대 위치 가 있어야합니다
- 부모는 오버플로가 있어야합니다 . hidden ; (경계 반경 효과가 보이도록)
- :: 의사 요소 이전 (또는 :: 이후)에는 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 );
}
이 버그를 해결하기 위해 반올림 코너에서 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);
}
IE9의 마스크 div는 좋은 생각입니다. 약간의 설명을 돕기 위해 완전한 코드를 제공하고 있습니다. DIV에 버튼을 배치하는 것은 좋지 않지만 PNG 마스크를 포함하거나 SVG를 사용하여 모든 노력을 기울이는 것보다 이해하기 쉽다고 생각합니다. 아마도 IE 10이 제대로 지원할 것입니다.
<!DOCTYPE html>
<html>
<head>
<title>Button Test</title>
<style>
.btn_mask { cursor:pointer;padding:5px 10px;border-radius:11px 11px 11px 11px;
background-color:transparent;-moz-border-radius:11px 11px 11px 11px;
-webkit-border-radius:11px 11px 11px 11px;overflow:hidden;padding:0px;
float:left; }
.btn { cursor:pointer;text-decoration:none;border:1px solid rgb(153,153,153);
padding:5px 10px;color:rgb(0,0,0);font-size:14px;font-family:arial,serif;
text-shadow:0px 0px 5px rgb(255,255,255);font-size:14px;
border-radius:11px 11px 11px 11px;-moz-border-radius:11px 11px 11px 11px;
-webkit-border-radius:11px 11px 11px 11px;box-shadow:0px 0px 0px rgb(0,0,0);
-moz-box-shadow:0px 0px 0px rgb(0,0,0);
-webkit-box-shadow:0px 0px 0px rgb(0,0,0);background-color:rgb(255,204,0);
background-image:linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,153)),to(rgb(255,204,0)));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#ffcc00)')";background-image:-moz-linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
}
.btn:hover { cursor:pointer;text-decoration:none; border:1px solid rgb(153,153,153); padding:5px 10px 5px 10px; color:rgb(0,0,0); font-size:14px; font-family:arial,serif; text-shadow:0px 0px 5px rgb(255,255,255); font-size:14px; border-radius:11px 11px 11px 11px; -moz-border-radius:11px 11px 11px 11px; -webkit-border-radius:11px 11px 11px 11px; box-shadow:0px 0px 0px rgb(0,0,0); -moz-box-shadow:0px 0px 0px rgb(0,0,0); -webkit-box-shadow:0px 0px 0px rgb(0,0,0); background-color:rgb(255,255,0); background-image:linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,0)),to(rgb(255,255,153))); background-image:-moz-linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); }
</style>
</head>
<body>
<form name='form1'>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
</form>
</body>
</html>
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 */
나에게 이것을하고 있었는데 일단 "filter :"라인을 제거하면 출혈이 사라졌습니다. 또한 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);
빠른 IE 그림자 수정 :
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(' '));
}
});
}
}
그림자 를 사용 하여 그라디언트를 얻을 수 있으며 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') %,...; }
나침반은 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;
}
나를 위해 작동합니다 ...
<!--[if gte IE 9]>
<style type="text/css">
.gradient{
filter: ;
}
</style>
CSS
border-radius: 10px;
background: #00a8db; /* Old browsers */
background: -moz-linear-gradient(top, #00a8db 0%, #116c8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a8db), color- stop(100%,#116c8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a8db 0%,#116c8c 100%); /* W3C */
-webkit-box-shadow: 1px 5px 2px #999;
-moz-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a8db', endColorstr='#116c8c',GradientType=0 ); /* IE6-8 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYThkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMTZjOGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #116C8C 0%, #00A5D7 100%);
참고 URL : https://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding
반응형
'IT story' 카테고리의 다른 글
| S3를 통해 Amazon CloudFront에서 gzipped CSS 및 JavaScript 제공 (0) | 2020.05.13 |
|---|---|
| 타이프 스크립트 : 문자열과 문자열의 차이점 (0) | 2020.05.13 |
| Redux-여러 상점, 왜 그렇지 않습니까? (0) | 2020.05.13 |
| 모바일 브라우저에서 CSS3 100vh가 일정하지 않음 (0) | 2020.05.13 |
| 어떤 브라우저를 지원 (0) | 2020.05.13 |