This source indicates that display:inline-block behaves similarly to display:inline in IE7. To address this, a simple modification can be made to support IE7 using a basic hack:

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

Hopefully, this solution meets your expectations.

---

UPDATE:

The issue lies with the property hasLayout, as explained here. Both zoom:1 and height:any_value trigger hasLayout. While

display:inline-block; *display:inline

can overwrite subsequent display:block declarations, setting a specific height:30px reactivates the hasLayout. The solution is to eliminate hasLayout, as detailed in this article.

Check out this demo for a visual representation. Since adjusting height directly is challenging, padding-bottom and font-size are used to mimic height in other browsers while preserving the widest element's width.

---

UPDATE 2:

Have you considered jQuery solutions? Perhaps assigning different widths to elements in IE7 could be a viable approach.

An Update: Revisiting the Discussion

The issue at hand revolves around the floating behavior of the div element. When an element is floated, it moves outside the normal page flow, causing IE to assign it dimensions of width:0; height:0;. Subsequently, when other elements are placed within it, they establish their own dimensions, shifting the floated element in response (my apologies for any language barriers). In this scenario, consider element A set as inline-block with a particular height, say x. Transitioning it to a block should make it fill its parent, but IE perceives the parent as having width:0. To address this, the initial inline-block attribute in div.ib a should be removed OR a fixed-width parameter can be established for the floated div.

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

Furthermore, it is a known recommendation from W3C that floated elements should possess a fixed-width. Notably, IE 6 also requires a fixed height for proper functionality!!!

Alternatively -if feasible within your solution- consider switching the first inline-block to inline solely for IE:

display: inline-block; 
*display: inline; 

Yet, the width adjustment (for div) stands as a more standardized and adaptable solution.

Bringing this Discussion to a Close

Nonetheless, when it comes to overwriting a css-attribute exclusively in IE, you can explore three primary avenues:

1. One approach involves utilizing conditional comments to selectively reveal content to IE. A comprehensive illustration might resemble the following:

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

   Flexibility is apparent with the various applications of conditional comments.

2. Another method involves leveraging CSS selectors tailored to show elements in IE while concealing them in other browsers. This concept is epitomized by:

   /* regular styling */
   your-selector{
   }
   
   /* visible in IE 6 exclusively */
   * html your-selector{
   }
   
   /* visible in IE 7 solely */
   *:first-child + html your-selector{
   }
   
   /* visible in IE 7 and beyond */
   html > body your-selector{
   }
   
   /* visible in IE 8 and beyond */
   html > /**/ body your-selector{
   }
   

3. The third technique entails utilizing IE-specific css-properties:

   /* typical selector */
   your-selector{
       /* standard property, visible across all browsers */
       color: #FF0;
       padding: 20px auto 35px;
   
       /* special properties tailored for IE */
   
       /* visible to ie 6 solely */
       _color: #FF0;
       _padding: 15px auto 30px;
   
       /* visible in ie 7 or lower (7, 6, 5, ...) */
       *color:#FF0;
       *padding: 15px auto 30px;
   }
   

---

Feel free to reach out if you require further clarification or have any queries.

To target styles specifically for IE7, it's recommended to place them in a separate CSS file and utilize a conditional comment to only include it for IE7.

<!--[if IE 7]>
<link ...insert your IE7 specific stylesheet here ... >
<![endif]-->

Ensure that this code snippet is positioned below the link to the regular CSS file.

display: inline-block 

When viewing in IE7, the code appears as follows:

*display: inline;
zoom: 1

In IE7, the <code>display: inline-block

property may not work for elements that are not inline by default, causing IE to ignore this rule for DIV elements. However, switching the DIV to a SPAN, for example, should resolve this issue.

One thing to keep in mind here is that if you want the a tag anchors to display on separate lines, they need to be block elements rather than inline. Your floating divs stack to the left, creating a line, but they are not inline elements as they are outside the document flow due to the float property.

Let's simplify things. Here's the HTML snippet you provided:

<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>

Based on the CSS you provided, in Safari and Firefox, I see three blocks with two links each, displayed on separate lines. However, in IE7, what you're seeing are not two inline-block elements, but two inline elements. This is because IE7 does not support inline-block due to a hasLayout error, causing it to default to the inline behavior for the a elements.

If you want the links to appear on separate lines and fill the width of the container, you can achieve this by simply adding the following CSS rule (applied to .ib a):

.ib a {display:block;}

By doing this, the width is inherited from the parent container, the a elements take on default styles, and everything looks good. So you can simplify your code to:

<div class="ib">
    <a href="#">Test</a>
    <a href="#">Test longer</a>
</div>

There's no need to explicitly set display: block; on the a elements again in this case, as they are already behaving like block elements.

It's important to keep things simple and avoid overcomplicating them unnecessarily.

Check out this fiddle for reference: http://jsfiddle.net/dhYjZ/1/

It seems that the culprit in this situation is the use of the float property. The issue is not that IE7 fails to recognize the element as a block, but rather that the div with the float property lacks a specified width. This is evident in the following example:

http://jsfiddle.net/mmpX3/129/

From my experience with older browsers, I've observed that floated elements in versions equal to or below IE7 often require a fixed width to prevent complications.

In your specific scenario, I recommend either assigning a fixed width as shown in the JS Fiddle, or eliminating the float property if it isn't essential. If you provide the rationale for using the floated div, I might be able to propose an alternative solution.

I'm unsure why combining float and display:inline-block inhibits the re-establishment of display:block, but it appears to be a typical quirk of IE7 that can be circumvented.

I'm uncertain about the desired outcome you are seeking. Do you want the black background to form a single rectangle encompassing both links rather than separate rectangles for each link?

If that's the case, why not add the background to the DIV instead of the links?

UPDATE: There appears to be an issue with IE7 where elements are displayed as a combination of block and inline-block when the display: inline-block rule is applied. This happens even if another value for display takes precedence.

If you visit http://jsfiddle.net/P2N5c/16/, you'll see that the order of rules doesn't affect this behavior.

Currently, I'm unsure how to fix this bug, but you could work around it by not giving the links both ib and blockbyclass. Instead, only assign the classes that make them blocks. In other words, omit the ib class. Rather than toggling classes to change the states of the DIV, replace one class with another.