線形勾配IE11ホワイトスペースの問題

Question

私は自分のサイト上でいくつかのステータスボックスの自分のためのCSSフレームワークを構築しようとしています。

私はここに例を入れている：

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

をそれはChromeとFFで本当によく動作しますが、IE 11で私の直線勾配はかなり私のスパンを満たしていないと私が得ますボーダーの周りに表示されて迷惑な小さな白いスペースは、画像を参照し、アイコンの上にある緑色のボックス内の空白に注意してください。

誰もがこれを阻止する方法を知っていますか？

linear gradient issue in IE11

Answer 1

あなたが混乱することができるもの、に2クラスを使用しているようです。 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とで2つの同様のクラスがあるので、それはより良いのいずれかを削除するにはそれら。私は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を変更し、それを修正するために管理：ピクセルで

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

それは4で動作するように失敗し、7

私は国境を丸めIEとのいくつかの問題を推測サイズのがzooomなど* 135パーセント12ピクセルの0.2emのような大きさの分数で計算した場合それは私が考えるピクセルサイズでは発生しないだろう...しかし、あなたはこれは相対的なものに;-)