csswizardry-grids
csswizardry-grids copied to clipboard
csswizardry
Browsers Support
Supposing it has been tested already on different browsers could you append results to the README file? I'm sorry if the question appear pedantic but it's alway the first thing I look for ; )
I just started using this grid system and I must say it is great!!! From my experience, it works on the latest Chrome, Firefox, Safari (on MAC and iOS), IE8 (except for the responsive bits), IE9 (I haven't yet checked it on IE10).
I am using it in a large Enterprise Web App so I also need it to work on IE7, which it doesn't due to IE7's box model and lack of an inline block.
To fix this, I created a polyfill that will allow this grid system to work in IE7. It should also work on the Inuit 5.0 grid as well. If you need IE7 support, check out this polyfill: https://github.com/emcpadden/csswizardry-grids-ie7-polyfill
Safari 7 has an issue with the CSS hack to remove whitespace between grid items. The author makes no promises that would work forever - looks like it wont.
The absolute safest way to ensure that it's working is to use comments. It's not that bad and you'll get used to it.
If you don't like to use comments, just do the following: .grid { font-size: 0; }
.grid__item{ font-size: 12px; //or whatever your base font size is zoom: 1; //IE7 fix *display: inline; //IE7 fix }
//IE7 fix for reversed grid .grid--rev{ zoom: 1; }
The Drawback of this method is you won't inherit the parent font size of the grid container. You got to know that. But I never had a problem with that.
