Fatal编程技术网
  • css/
  • Css 为什么内联块元素在Internet Explorer 8中显示不正确？

Css 为什么内联块元素在Internet Explorer 8中显示不正确？

css internet-explorer-8

Css 为什么内联块元素在Internet Explorer 8中显示不正确？,css,internet-explorer-8,Css,Internet Explorer 8,我有以下代码： <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; bor

我有以下代码：

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


asdfasdf
asdf
asdfasdf
是
这在Firefox和Chrome中显示得很好，但在InternetExplorer8中却没有。它们有布局，所以这不是问题，而且宽度足够小，可以放在一条线上

如果我改用
s，它确实有效；但是，我很想知道为什么
s在IE中不起作用。

IE<8无法将默认为
块
的元素切换为
内联块
元素。不管你怎么努力，它们总是保持
block
，除非你使用
float
IIRC

在您的示例中，似乎不需要使用
。如果是这种情况，为什么不使用默认的
或
内联的元素呢。否则，
浮动
就是答案。
试试这个


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




.一{
宽度：200px；
边框：1px纯黑；
}
.二{
显示：-moz内联框；
显示：内联块；
宽度：70px；
边框：1px纯绿色；
}
*html.2{
显示：内联；
}
*+html.2{
显示：内联；
}
asdfasdf
asdf
asdfasdf
是

IE的旧版本不理解块级元素的
内联块


inline block
对内联元素起作用的原因是，它们这样做是为了触发
hasLayout
。用于内联元素的has布局的工作原理与
内联块的工作原理完全相同

因此，要使
内联块
与块级元素一起工作，请使它们内联并以某种方式触发
hasLayout
，例如，使用
缩放：1

因此，对于您的代码，有两种方法：将
div
s更改为
span
s，或者添加内联hack（或者将代码移动到外部样式表并使用条件注释）。带有内联黑客的版本如下所示：


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




asdfasdf
asdf
asdfasdf
是

更改适用于IE的文档类型


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



显示：内联块；
*缩放：1；
*显示：内联


您可以为其他浏览器添加内联块，但对于IE，您可以使用*添加样式。它只在ie中起作用
您的文档是否有doctype声明？您说“它不起作用”是什么意思？您想要的效果是什么？啊，好吧，我声明了HTML4，因为它是一个非常旧的页面，而不是XHTML或HTML5 doctype，在较旧的浏览器中会优雅地退化。你的例子在chrome最新版本和ie8中看起来是一样的，但事实并非如此。IE8完全理解内联块显示模式。但IE7完全没有意识到这种模式。尽管您可以通过将display设置为inline并强制该元素的布局（例如，使用zoom属性）来模拟内联块行为，但确实如此。IE8似乎可以正常使用
内联块
我将更新我的答案。IE8可以很好地使用内联块，直到您开始隐藏/显示内联块内的元素，这些元素会导致父容器增长或收缩。