Hi all, I was looking into determine the size of some text on 2 websites (basically it is 2 websites a dev and a live copy and I wanted to determine whether they are the same on every browser) and because I couldn't find a way to do that in IEs, I thought I will write a very small internal script to find out:
var size = $(".myDiv p").css("font-size");
console.log("The size is: " + size);
That worked ok but I am now trying to put the values I got back from it in use. In IE9 the first website returned this value: 11.93px; The second 12.13px. Now my question is about rounding up and down. From memory and experience I think IEs round everything up, which, in a case like 9.5px is quite easy, because you will get 10px, but what about in relation to the values output above? What's the real size of the text in pixel?
Also, how about the other browsers? Having a quick look around I found this http://ejohn.org/blog/sub-pixel-problems-in-css/ which helps to an extent, but still not quite clear
thanks, read that, but it is slightly different, in that it rounds number ending with .5, whereas I need oto understand how the whole thing works with numbers ending with any digit, like the one I posted above, and also I don't really want to change the behaviour of the browser, I am just interested in what it does when it comes across these numbers. I mean there they talk about subtracting percentages to make sure that the numbers get rounded up/down to the desired one, whereas I just need to find out what happens
The different in decimal may result in a little bit of element locations displayed on the browser.
You'll notice that in Webkit and Opera, which use the rounding-down strategy, there is space leftover. FireFox, IE8, and IE9, on other hand, vary the widths of the boxes so that, in total, they occupy all of the available space. But here's the catch: when the floating decimal is .5 or greater, our old friends IE6 and 7 stupidly round up, forcing the final column in our example to wrap to the next line since the four columns become collectively wider than their parent container. Facepalm.