IE display inline block

2019-01-23 14:01发布

站内问答 / HTML/CSS
814 5 5

So I am doing like so

<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 does not. They have layout so that isn't the problem, and the widths are small enough so it fits on one line.

If I use span's instead it does work, however I would really like to konw why div's dont' work in IE

5条回答
何必那么认真
2楼-- · 2019-01-23 14:31

The old versions of IE don't understand the inline-block for block-level elements.

The reason why inline-block works for inline elements is because they did it so it triggers hasLayout. And the has layout for inline elements works exactly like an inline-block.

So, to make inline-block work with block-level elements, make them inline and somehow trigger the hasLayout, like, using zoom: 1.

So, for you code, there are two ways: change divs to spans, or add inline hacks (or move the code to external stylesheets and use conditional comments). The version with inline hacks would 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>
查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
3楼-- · 2019-01-23 14:40

Changing the doc type worked for IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
4楼-- · 2019-01-23 14:43

IE < 8 cannot switch elements that are block by default to inline-block elements. No matter how hard you try, they will always remain block unless you use float IIRC.

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

查看更多
0人赞 添加讨论(0) 举报
对你真心纯属浪费
5楼-- · 2019-01-23 14:53

Try this

<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人赞 添加讨论(0) 举报
该账号已被封号
6楼-- · 2019-01-23 14:56

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

you can add inline-block for other browser but for IE you can add style with *. it only works in ie

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)