How to give Internet Explorer different CSS lines?

Question

Imagine I'm having a DIV. I want to display it in a row with other divs, so I'm giving it display: inline-block along with other style definitions in a CSS sheet.

Now Internet Explorer wants to have display: inline; for the behavior I want.

How do I give Internet Explorer a seperate styling command to overwrite the definition for good browsers, so only IE will have display: inline;. Due to technical limitations I cannot use <![If IE] -->-stuff in HTML, I need to stay within the CSS file.

please specify the IE you are talking about. They don't behave all the same for inline-block elements — meo, Mar 29 '11 at 09:26
I've updated [my answer](http://stackoverflow.com/questions/5470358/how-to-give-internet-explorer-different-css-lines/5470395#answer-5470395) to reflect you comment — Alex, Mar 29 '11 at 09:33
You need `zoom: 1` (or any other property that gives `hasLayout`) in most circumstances to make `inline-block` work in IE7 on block-level elements. See my answer for more details. — thirtydot, Mar 29 '11 at 09:44

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

You can use selectors like so:

\9 – IE8 and below, * – IE7 and below, _ – IE6

So in your case:

*display: inline;

You can simply add this to the rest of the css:

div{
display: inline-block;
// some;
// other;
// css;
*display: inline;
}

Read my blog post on this.

Update

IE version 5 till 8. (They are all affected) – Cobra_Fast 1 min ago

So in this case, you'd use

div{display\9:inline;}

edited May 23 '17 at 12:19

Community

1
1

answered Mar 29 '11 at 09:25

Alex

8,875
2
27
44

There are a few ways to add 'IE Hacks' i found this method the least intrusive. – Alex Mar 29 '11 at 09:30
Just don't use invalid CSS. See @Peeter answer for conditional CSS. – eisberg Mar 29 '11 at 09:35
cheers :) It goes without saying i know, but so many people dont accept the answer. This site is dependant on it. – Alex Mar 29 '11 at 09:36
@eisberg unfortunately some time "hacks" can not be avoided. Especially if you're editing legacy sites, that were developed prior to reset.css etc. – Alex Mar 29 '11 at 09:41

score 1 · Answer 2 · answered Mar 29 '11 at 09:29

1

A horrible way to do it is: http://www.webdevout.net/css-hacks

Even though you cannot change the HTML I'd read up on http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

answered Mar 29 '11 at 09:29

Peeter

9,282
5
36
53

score 0 · Answer 3 · answered Mar 29 '11 at 09:30

0

IE actually has quite good support for inline-block - if the element is originally an inline element. So try using a span instead of the div.

answered Mar 29 '11 at 09:30

RoToRa

37,635
12
69
105

score 0 · Answer 4 · edited May 23 '17 at 11:55

To make inline-block work on block-level elements in IE7, I frequently add this to my answers:

I sure hope what I'm suggesting everywhere actually works :D

See: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

selector {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

How to give Internet Explorer different CSS lines?

4 Answers4

Linked