linear-gradient IE11 white space issue

user_8950478 0
Viewed 129

I'm trying to build a css framework for myself for some status boxes on my site.

I have put up an example here:

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

It works really well in chrome and ff, but in IE 11 my linear gradient doesn't quite fill my span and I get an annoying little white space appearing around the border, see image and note the white space in the green box above the icon.

Does anyone know how to prevent this?

linear gradient issue in IE11

css
2 Answers

Seems you are using two Class into one, which can be confused. IE11 can be a nightmare but I have fixed it, and it should be ok on Ie11.

as you can see it on the https://www.codeply.com/go/8gTRzBR8Qd

Your code is 

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

I change it, There is two similar class with sb and sb-red, so it better to remove one of them. I have changed some of the CSS as well.

<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>
user_88187350

I unfortunately don't exactly know why but it happens on 135% zoom in IE 10 and it seems to be a problem with border, not in gradient bg itself.

I managed to fix it changing border of .sb-green to this:

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

In pixels it failed to work at 4, 7.

I guess its some problem with IE rounding the border size when its calculated by fractions of sizes like 0.2em of 12px * 135% zooom etc. It wouldn't happen with pixel sizes I think... but I understand why you try to use relative ones ;-)

user_71736630
Related