Fractional pixels are rounded differently in IE and Chrome

Question

Is there any way to control whether a browser rounds fractional pixels up or down? IE rounds down by default, and Chrome rounds up, as can be seen in the following example http://jsfiddle.net/q5BQs/3/

My HTML:

<div id="percentage">
    <div class="first">50%=100px</div>
    <div class="second">50.5%=101px</div>
    <div class="third">51%=102px</div>
</div>
<br />
<div id="pixels">
    <div class="first">50px</div>
    <div class="second">50.5px</div>
    <div class="third">50.6px</div>
    <div class="fourth">51px</div>
</div>

My CSS:

#percentage {
    width: 200px;
    color: white;
}

#percentage .first {
    width: 50%;
    height: 20px;
    background-color: red;
}

#percentage .second {
    width: 50.5%;
    height: 20px;
    background-color:green;
}

#percentage .third {
    width: 51%;
    height: 20px;
    background-color:blue;
}

#pixels {
    color: white;
}

#pixels .first {
    width: 50px;
    height: 20px;
    background-color: red;
}

#pixels .second {
    width: 50.5px;
    height: 20px;
    background-color:green;
}

#pixels .third {
    width: 50.6px;
    height: 20px;
    background-color:blue;
}

#pixels .fourth {
    width: 51px;
    height: 20px;
    background-color:red;
}

Agreed with @Aioros. Fractional pixels are always going to be a bad idea. — Spudley, Dec 02 '13 at 15:43
Im not seting these manually... on my grid system... I just put something like 6 coluns... or 8 coluns... and it have these % with a lot of decimals... — user3058000, Dec 02 '13 at 17:20

score 0 · Accepted Answer · answered Dec 03 '13 at 08:14

0

You can't change the way that a browser rounds fractional pixels. It's one of the inbuilt differences in the way different browsers render HTML.

answered Dec 03 '13 at 08:14

Sinister Beard

3,570
12
59
95

Fractional pixels are rounded differently in IE and Chrome

1 Answers1