IE7 Lesson Learned Revisited and Some Handy Tips
June 4, 2013 7:22 pm Leave your thoughts
Just a short post on things that I had to do on my recent projects in order to make it look acceptable in IE7. Sadly, some users are still stuck on the land of IE7 and IE8; this is very bad for us developers and content providers. Also equally sad is the fact that of course we don’t want to lose our market share by alienating IE7 and IE8 users, hence a whole lot of CSS hacks and JS caveats.
IE7 Does Not Support Inline-Block
Yes, I actually forgot about this one a lot of the times. Thankfully there are some hacks to do this:
|
1 2 3 |
display: inline-block; zoom: 1; /*prevent ie from doing wacky zoom values*/ *display: inline; /* only readable to IE... */ |
Popup Window Name Cannot Have Spaces or Non-alphanumeric Characters
I talked about window popup last time, but have forgotten about this. If you want your window popup to work on IE7, then do not have any spaces on the windows name.
|
1 2 3 4 5 |
window.open("http://www.google.com","Google window"); //not going to work //eliminate all spaces on the window name and it'll work window.open("http://www.google.com", "GoogleWindow"); |
Always Specify the Widths on Your DIV
On modern browsers like Chrome, DIVs expand automatically depending on the contents. However with IE7, if you have a div, make sure you check if you need to specify the widths, otherwise it’s likely to be 100% by default.
Handy Libraries for Display Compatibility
Here are some libraries that I have used to help dealing with legacy browsers such as IE7 and 8
Modernizr
With this amazing library, we will be able to do feature detections and will be able to style html5 tags in browsers that doesn’t support HTML5 tags yet. Those items will simply be rendered as block elements.
Get modernizr here.
Conditionizr
This library allows us to detect modern features such as touch or retina display. In addition it is able to do polyfills queueing based on the IE versions, so we won’t have to load polyfills libraries if we don’t need to load them.
Get conditionizr here.
Respondjs
I talked about responsive design a couple weeks ago. In order to do this properly, the css relies heavily on @media and min-width css rule. However browsers like IE7 and 8 will not support this kind of modern rules. Thanks to respondjs, things are looking better now when rendered using these older browsers. Granted there are some delay rendering the proper display, as the script must load completely first, however it’s much better than bad looking website on legacy IE.
Get respondjs here.
Sizzlejs
Do you want to use :last or :first css rules on legacy IE browsers? Perhaps this is the answer. Use sizzlejs to get support for those rules on any browsers.
Get sizzlejs here.
I hope this short post helps others who still need to support legacy Internet Explorer browsers.
Categorised in: Javascript, jQuery, Web Design