How can I override "display:inline-block" with "display: block" in IE7?

Question

Here's some code to illustrate the problem I'm running into. jsFiddle Demo

<div class="normal">
    <a href="#">Test</a>
    <a href="#">Test longer</a>
</div>
<div class="ib blockbyclass">
    <a href="#">Test</a>
    <a href="#">Test longer</a>
</div>
<div class="ib">
    <a href="#" style="display: block;">Test</a>
    <a href="#" style="display: block;">Test longer</a>
</div>

body{background-color: gray;}
div{float:left; margin: 5px;}
a {background-color: black; color: white;}
div.ib a {display: inline-block;}
div.normal > a {display: block;}
div.blockbyclass> a {display: block; }

I have a certain type of link that under most circumstances needs to be rendered as inline-block, but in a certain case needs to be rendered as block elements. Specifically, I want them to each appear on their own line and take up the entire area of the containing div. In this particular case, the div containing the links is set to float, so it will resize itself based on the largest of the links inside it. IE8, IE9, Firefox and Chrome render these links correctly, but no matter what I do IE7 refuses to forget the display: inline-block rule.

How can I make IE7 show these elements in "block" mode?

Answer 1

Acording with this article display:inline-block has a similar behavior that display:inline in IE7, so you can make a litte change only to support IE7 (with a simple hack for IE):

div.ib a {
   display: inline-block; 
   *display: inline; /* IE7 and below */ 
}

I hope this works as you expected.

---

EDIT:

Ok. The problem are with the property hasLayout explaining here. Both zoom:1 and height:any_value activates the hasLayout, so meanwhile display:inline-block; *display:inline works to overwrite the next display:block declarations, putting a height:30px (for example) returns the property hasLayout. So the thing to do is remove the hasLayout as it says in this article.

I have this demo to show how works. Because height is practically untouchable I using padding-bottom and font-size to simulate the height in other browsers. Note that the width of the widest element is maintained.

---

EDIT2:

Have you are considerate jQuery solutions? (Only giving the elements different widths in IE7)

Answer 2

Update: moved from comments here:

The problem is on div floating. When you float an element, that will be outside of pages normal stream, so, IE will take for it width:0; height:0; and when you put some elements in it, they will create their own height and width and the floated-element will be rendered how can push them (my English is really bad, so sorry). First step, A is inline-block so its height is for example x. when you make it block it should fill its parent, but, in IE mind, its parent has width:0. so you should remove the first inline-block attribute from div.ib a OR you can create a fixed-width attribute for floated div element.

div { float: left; margin: 5px; width: 80px; } 

also, insofar as I know, W3C recommends that floated elements should have a fixed-width. - IE 6 needs a fixed height too to work correctly!!!

The another way -if you can and your solution allows you- is that change the first inline-block to inline just for IE:

display: inline-block; 
*display: inline; 

But the width solution (for div) is more standard and flexible.

END UPDATE

However, for overriding a css-attribute just in IE, you have 3 optional way to do:

1. The first way is using conditional comment that makes it's content visible to IE only. A full example is something like this:

   <!-- visible to IE less that 7 (6, 5, etc) -->
   <!--[if lt IE 7]> <link href="/Content/ie6.css" rel="stylesheet" type="text/css" /> <![endif]-->
   
   <!-- visible to IE 7 only -->
   <!--[if IE 7]> <link href="/Content/ie7.css" rel="stylesheet" type="text/css" /> <![endif]-->
   
   <!-- visible to IE 8 only -->
   <!--[if IE 8]> <link href="/Content/ie8.css" rel="stylesheet" type="text/css" /> <![endif]-->
   
   <!-- visible to IE 9 and above and also visible to other browsers -->
   <!--[if gt IE 8]><!--> <link href="/Content/normal.css" rel="stylesheet" type="text/css" /> <!--<![endif]-->
   

   As you can see, you have many options to use conditional comment.

2. The other way is using CSS specially selectors that make some selectors visible to IE and hide them from other browsers. A full example is:

   /* normal */
   your-selector{
   }
   
   /* visible to IE 6 only */
   * html your-selector{
   }
   
   /* visible to IE 7  only */
   *:first-child + html your-selector{
   }
   
   /* visible to IE 7 and above */
   html > body your-selector{
   }
   
   /* visible to IE 8 and above */
   html > /**/ body your-selector{
   }
   

3. The third way that I know is using IE specialized css-properties:

   /* normal selector */
   your-selector{
       /* normal property, visible to all browsers */
       color: #FF0;
       padding: 20px auto 35px;
   
       /* use special properties in name/value for IE */
   
       /* visible to ie 6 only */
       _color: #FF0;
       _padding: 15px auto 30px;
   
       /* visible to ie 7 and below (7, 6, 5, ...) */
       *color:#FF0;
       *padding: 15px auto 30px;
   }
   

---

Let me know if you have any questions or need clarifications on any part.