Heads up on a Chrome CSS rendering bug. The new version of Chrome ( 25.0.1364.97 and 25.0.1364.97 m) has a bug that affects left floated child elements of left floated, 100% width container elements e.g.
<div style="width:100%;float:left;">
<div style="float:left;">
<!-- Content -->
</div>
</div>
It affects unimportant little things like horizontal navbars by causing the second, third, fourth.. menu tabs to sit 20px lower in the page than the first menu tab.
The solution is to remove the left float, set display to inline-block, and add a 1px padding to the top of the container. For example, to correct a Genesis primary navbar menu’s tabs:
ul#menu-primary {
display:inline-block!important;
float:none!important;
padding-top:1px!important;
margin-top:0!important;
}
The bug has been reported to Google. You can read more about it at StackOverflow too.
So if your web pages are suddenly acting up in Google Chrome after months of working great, check it’s not a CSS display issue with Chrome.
You can test a site in older browsers live online with browserling.com.
