As a beginner coder, I generally assume that if something goes wrong it’s my code. While it’s true that a website needs to be coded in such a way that it’s interoperable, sometimes the problem originates in the browser. This may seem obvious to any web programmer, but it wasn’t to me, mostly because the assumption really is, “I’m not an expert, so the mistake must be something in my code.”
Font-size Chrome Bug
In my case, I was having issues with font sizes, and this is such a basic part of CSS that it never occurred to me that it was a browser issue. Lo and behold, it turns out the current version of Chrome (17.0.963.79) rounds font-sizes to the nearest whole number, and I was doing calculations based on Chrome. Because of this bug, the site I was formatting looked very different.
For example, say I have:
h2 { font-size: 1.2em; }
h3 { font-size: 1.17em; }Firefox: h2 = 19.2px , h3 = 18.7167px
IE9: h2 = 19.2px, h3 = 18.68(?)px
but Chrome: h2 and h3 = 19pxSee jsFiddle example.
While these differences are so small you can barely tell in the example, you can imagine that on an entire website, it has a pretty big effect especially if it’s a base font size. In the end, I filed a Chrome bug report and it’s being looked at.
Sometimes it’s a Mystery
In our website’s book banner, there is a little styling trick in order to make it look nicer. What really got me was that it was using absolute positioning (which generally I avoid). However, if you make it relative, it no longer does what it’s supposed to.
Have something like this in the CSS:
span {
position: absolute;
top: 1em;
left: 1em;
border: 10px solid transparent;
border-right: 10px solid blue;
}
span+span {
position: relative;
left: 2em;
}
the HTML should then have an empty block: <span></span><span></span>Result:
If you want to play with it, it’s on jsfiddle
So far, I haven’t found an answer, so I’ve simply recoded it to make it work in the new layout. Now the strange thing is that it works on MAC, but breaks using the same browsers on Windows.