Ideally it shouldn’t be necessary to provide different CSS for different browsers, but sometimes needs must, particularly when it comes to dealing with the quirks of older versions of Internet Explorer (i.e. IE6 and IE7).
Thankfully there’s a couple of simple hacks that can be used to target CSS at old versions of IE only – the underscore (_) hack for IE6 (and below) and the star (*) hack for IE7 (and below). Just put _ or * in front of a CSS property as required, e.g.:
color: red; /* all browsers */
*color: blue; /* IE7 and below */
_color: green; /* IE6 and below */
Using these rules, this sentence should appear green in IE6 and below, blue in IE7 and red in all other browsers.
There are other hacks that can be used. Check out these blog posts for more:
CSS Tip: Targeting IE 5.x, 6 and 7 Separately
IE7 only CSS hacks: Explained
This is annoying, but does not go against the HTTP specification, which states that GET requests are cacheable, whereas POST results are not. AJAX requests seem to generally default to GET (JQuery certainly does), so IE caches them.
Therefore, the solution is to make sure that AJAX requests use POST rather than GET. In jQuery, you can do this by setting:
For Prototype, you can set:
In the jQuery.ajax() method, there is also a ‘cache’ setting, which is true by default, but can be set to false, which prevents caching. It does this by appending a TIMESTAMP to the URL, so that each request is made to a different URL, so a cached result cannot be returned. If not using jQuery, an alternative to ensuring that your request is a POST request rather a GET request is to add a ‘cache-busting’ parameter, e.g. a timestamp, to the end of the request URL, e.g.:
var cacheBuster = new Date().getTime(); //Get timestamp
var url = 'http://www.example.com/getdata?cb=' + cacheBuster; //Add timestamp to URL
Another bit of CSS that I use in CSlide that didn’t work in IE7 is opacity – http://www.w3.org/TR/2011/REC-css3-color-20110607/#transparency.
After digging around various forums, I found that the solution is to add a filter property (which is not part of the CSS standards and is only supported by IE), as well as the opacity, as follows:
filter: Alpha(Opacity=80); /* IE */
opacity: 0.8; /* Standards-compliant browsers */
I was having some problems with getting the layout of the buttons for the JQuery Tools Scrollable Navigator plugin to work in IE7 for CSlide, e.g. https://learntech.imsu.ox.ac.uk/cslide/collections/index/87.
After a bit of searching I found this: http://fourwhitefeet.com/2009/02/css-display-inline-block-in-ie7/, so thanks to Cathy at http://fourwhitefeet.com.
It turns out that, in IE7, display: inline-block only works on inline elements, and I was trying to use it on divs. The trick is to wrap the content of these elements in an element that is natively displayed inline, e.g. span. For my purpose, I could just replace my divs with spans (they probably shouldn”t have been divs in the first place, but I’d mutilated the examples for Scrollable to gte where I was). It should also work by just adding spans around the content that you want to be ‘inline-block’, but inside the ‘block’ element, e.g.
<div><span style="display: inline-block">My Content</span></div>