선형 그라데이션 IE11 공백 문제

Question

내 사이트의 일부 상태 상자에 대해 CSS 프레임 워크를 직접 작성하려고합니다.

은 여기 예를 들어 올려 한 : 그것은 크롬과 FF 정말 잘 작동

https://jsfiddle.net/ravcg28r/

background: -moz-linear-gradient( left, #aeaeae, #aeaeae 2em, transparent 2em, transparent 100%); 
    background: -webkit-linear-gradient(left, #aeaeae, #aeaeae 2em, transparent 2em, transparent 100%); 
    background: -o-linear-gradient(  left, #aeaeae, #aeaeae 2em, transparent 2em, transparent 100%); 
    background: linear-gradient( to right, #aeaeae, #aeaeae 2em, transparent 2em, transparent 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aeaeae', endColorstr='#aeaeae',GradientType=1); 

을하지만, IE 11에서 내 선형 그라데이션은 매우 내 범위를 기입하지 않고 내가 얻을 테두리 주위에 나타나는 성가신 작은 공백, 이미지를보고 아이콘 위의 녹색 상자에 공백을 적어 두십시오.

아무도이를 방지하는 방법을 알고 있습니까?

linear gradient issue in IE11

Answer 1

당신이 혼동 될 수있는, 하나에 두 개의 클래스를 사용하는 것 같습니다. IE11은 악몽 일 수 있지만 그것을 고쳤으며, IE11에서는 괜찮을 것입니다. 더 나은 중 하나를 제거 할 수 있도록

당신이 https://www.codeply.com/go/8gTRzBR8Qd

에서 볼 수있는 코드는 내가 그것을 변경

<tr> 
<td><span class="sb sb-check sb-red">Some information</span></td> 
<td>&lt;span class=&quot;sb sb-check sb-red&quot;&gt;Some information&lt;/span&gt;</td> 
</tr> 

한, SB 및 SB-빨간색 두 개의 유사한 클래스가있다 그들. 나는 CSS의 일부를 변경했다.

<tr> 
<td><span class="sb-red sb-check">Some information</span></td> 
<td>&lt;span class="sb sb-check sb-red"&gt;Some information&lt;/span&gt;</td> 
</tr> 

Answer 2

나는 불행하게도 정확하게 이유를 알고하지 않습니다하지만 IE 10 135 %의 줌에서 발생하며 그 자체 BG 그라데이션, 테두리 문제가 될 것으로 보인다.

는 나는이에 .sb-green의 border을 변경 수정 관리 : 나는을

7. 추측 ,

픽셀에서

.sb-green { 
    border: 0.21em solid #75de75 !important;/*please mind the 0.21 */ 
} 

은 (는) 4에서 작동 실패의 IE는 국경을 반올림 몇 가지 문제 12px * 135 % zooom 등의 0.2em과 같은 크기의 분수로 계산했을 때의 크기입니다. 생각하는 픽셀 크기에서는 발생하지 않을 것입니다. 그러나 왜 상대적인 것을 사용하려고하는지 이해합니다 .-