CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-7
Martin Lechner
Martin Lechner

Reputation: 187

Looking for a clean way to handle IE7 Compatibilty for multiple inline-block elements

I have several occurrences of inline-block elements in a webpage. I'm tired of applying the 

*display: inline;
zoom: 1;

Hack on all css selectors which use those blocks. Is there a convenient way to fix it for all occurrences on the page?

Upvotes: 2

Views: 94

Answers (3)

Spudley
Spudley

Reputation: 168685

Sadly, my answer to your question is "No, there isn't a better solution." If you need to support IE7, these are the compromises you have to make.

There are probably ways you could refactor the stylesheet to make it less obvious -- hide it in a separate file, or put them in their own class or something like that - but the odds are you'll end up making compromises on it; it may make things look neater but it'll probably increase the maintenance effort rather than making things easier.

The only way you're really going to get away from having to have that source code is to use some sort of pre-processor to add them to your stylesheet when you publish the file. You can't get away from the need to have it on if you need to support IE7. But that doesn't actually get rid of it, and it adds an extra step to your deployment process, so it's not really ideal.

I guess the other option is to do what everyone else has done and drop support for IE7. That's probably the most sensible option. I haven't supported IE7 for several years now, and I don't know anyone else who has. Stuff like this is the reason for that. Oh, and the fact that nobody actually uses IE7 any more.

Upvotes: 3

Abhitalks
Abhitalks

Reputation: 28387

You can try using conditional styles hack.

Create a separate css file which contains your IE6/7 hacks with a !important. Then include this file in your page(s) after you link your regular css.

<!-- IE7-specific fixes -->
<!--[if lte IE 8]>
<style type="text/css"> @import url("./IE7Fix.css"); </style>
<![endif]-->

This way you won't have to touch your main css and you specify the style only once depending on id-selector or class-selector. Once you are sure you no longer need to support IE7, you may remove this inclusion.

Upvotes: 0

Olly Hodgson
Olly Hodgson

Reputation: 15775

You could have one big selector which applies to all of them at once, e.g.

/* Inline-block fix for older versions of IE */
.foo,
.bar,
.baz,
.gallery > li {
    *display: inline;
    zoom:1;
}

Upvotes: 0

Related Questions