Inline-block element's background extends to max-width, and not with the content -- in IE7 (Internet Explorer 7)

Question

Before I explain, here's the example HTML code:

<div class="righty">
    <p id="breadcrumbs">
        <a href="http://example.com">Nerd Archive</a> » <a href="http://example.com/how-to/">Coding</a>
    </p>
</div>

And CSS:

#breadcrumbs {
  font-size: 11px;
  font-weight: bold;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 600px;
  background: #D9ECFF;
  padding: 1px 3px;
}

The max-width property seems to be quite compatible with IE7, but the background of the element (a breadcrumb in this case) which should fill the width of the element's content, is extending to full-width in IE7. Here's go screenshots for comparison:

Element in IE7:

max-width element in IE7

Element in Modern browsers, in latest version of Chrome for example:

max-width element in modern browsers

Is there a way to fix this? Hope I am clear enough. Thanks!

Can you make a [demo](http://jsfiddle.net/) showing the problem? — thirtydot, Apr 07 '12 at 03:39
@thirtydot Okay, check this out (also added to the question): http://jsfiddle.net/s4DGB/3/ — its_me, Apr 07 '12 at 03:43

score 2 · Accepted Answer · edited May 23 '17 at 11:48

2

The only problem is that IE7 does not understand display: inline-block on elements that are not naturally inline, such as p. You can make it work using this:

display: inline-block;
*display: inline;
zoom: 1;

http://jsfiddle.net/thirtydot/s4DGB/4/

edited May 23 '17 at 11:48

Community

1
1

answered Apr 07 '12 at 03:48

thirtydot

224,678
48
389
349

Inline-block element's background extends to max-width, and not with the content -- in IE7 (Internet Explorer 7)

1 Answers1