Best IT Recipes

Built-in IE display unit

So i do this

<div style='width: 200px; border: 1px solid black;'> <div style='display: inline-block; width: 70px; border: 1px solid green;'> asdfasdf<br />asdf </div> <div style='display: inline-block; width: 70px; border: 1px solid green;'> asdfasdf<br />were </div> </div>

Now in firefox and chrome it displays just fine, but in Internet Explorer 8 it is not. They have a layout, so this is not a problem, and the width is small enough to fit on one line.

If I use span instead, it really works, however I would really like to konw why the div is not working in IE

+14
css internet-explorer-8
Jul 15 '11 at 5:26 a.m.
source share
5 answers

Older versions of IE do not understand inline-block for block-level elements.

The reason inline-block works for inline elements is because they did this to invoke hasLayout . And the layout for inline elements works exactly the same as inline-block .

So, to make inline-block work with block-level elements, make them inline and somehow call hasLayout , for example, using zoom: 1 .

So, for your code, there are two ways: change the div to span s or add inline hacks (or move the code to external style sheets and use conditional comments). The version with built-in hacks will look like this:

 <div style='width: 200px; border: 1px solid black;'> <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'> asdfasdf<br />asdf </div> <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'> asdfasdf<br />were </div> </div>
+27
01 Oct 2018-11-11T00:
source share

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

you can add an inline block for another browser, but for IE you can add a style with *. it only works if

+3
Feb 15 '14 at 15:55
source share

Change document type for IE

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+2
Sep 18 '13 at 15:15
source share

IE <8 cannot include default block elements in inline-block elements. No matter how hard you try, they always remain block unless you use float IIRC.

In your example, it seems that you do not need to use a <div> . If so, why not use the <span> or inline element by default. Otherwise, the answer is floating .

+1
Jul 15 '11 at 10:29
source share

try it

 <style type="text/css"> .one { width: 200px; border: 1px solid black; } .two { display: -moz-inline-box; display: inline-block; width: 70px; border: 1px solid green; } * html .two { display: inline; } * + html .two { display: inline; } </style> <div class="one"> <div class="two"> asdfasdf<br />asdf </div> <div class="two"> asdfasdf<br />were </div> </div>
0
Sep 28 '11 at 15:54
source share


More articles:


All Articles