IE8 与浮动 div 中的 inline-block 元素重叠答案

【问题标题】：IE8 overlaps inline-block elements in a floated divIE8 与浮动 div 中的 inline-block 元素重叠
【发布时间】：2014-08-03 14:41:25
【问题描述】：

我有一个网页，其中包含三个单选按钮，其标签为 span 元素，样式为 display: inline-block，所有这些单选按钮都位于 div 中，样式为 float: right。这在除 IE8 之外的所有浏览器中都能正常呈现（当然）。

预期（铬版）：

在 IE8 中的结果：

我能想出的最短重现代码如下：

<!DOCTYPE html> 
<html> 
<head>           
 <title>Home Page</title> 
 <style>
  div {
    //The issue remains whatever the value of float
    //but disappears if I remove this line
    float: right;
  }
  span {
    //The issue disappears if I remove this line or use any other value
    display: inline-block;
  }
 </style>
</head> 
<body>
  <div>
    <span>Labello 1</span>
    <span>Long Label 2</span>
    <span>Labellebleue 3</span>
  </div>
</body>
</html>

这无疑可以称为错误，但有什么“解释”吗？例如。听说过IE的“hasLayout”模型，但还没有完全掌握这个概念。

有没有实现相同效果的跨浏览器方式？我使用inline-block 的原因是在元素上使用边距和填充。不支持IE也没关系

在这个简单的示例中，如果我将span 元素替换为具有相同样式的div 元素，问题仍然存在，但如果我将div 元素与float: left 一起使用，问题就会消失。这是正确的解决方案吗？在将这个应用到我所有的真实（相当大的）页面之前，在应用这个解决方案之前我应该知道什么（基本上，左浮动divs 和内联块spans 之间的区别）？

【问题讨论】：

标签： html css internet-explorer-8 cross-browser

【解决方案1】：

使用下面获取跨浏览器display:inline-block：

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

另请阅读：Cross Browser Support for inline-block Styling

【讨论】：

谢谢，很棒的链接！会尝试。 Fiferox 什么时候开始支持 inline-block 的？如果我不使用 -moz hack 会影响很多用户吗？
您的目标受众是什么？查看分析报告，如果您有很多这样的用户，那么最好应用补丁。
好的。该解决方案适用于我的简单示例，但不适用于我的实际页面......将尝试找到如何编辑示例以重现。
好的，如果您可以为此创建一个小提琴，那就太好了。虽然我没有IE8，但我会尝试更改文档模式。
实际上，即使是我的简单示例也不起作用，由于某种原因，当我测试您的解决方案时，IE 已自行切换到 IE7 兼容模式。但是对于普通的 IE8，它仍然重叠。似乎 IE8 忽略了*display:inline 并使用了display:inline-block，而 IE7 确实使用了*display。请注意，我不会在 IE9 中使用 IE8 模式进行复制，我使用的是modern.ie VM。无论如何，jsfiddle 似乎不适用于 IE8...

【解决方案2】：

由于我没有找到让inline-block 表现出预期的方法，所以我最终求助于浮动span。类似的东西：

<!DOCTYPE html> 
<html> 
<head>           
 <title>Home Page</title> 
 <style>
  div {
    float: right;
  }
  span {
    display: inline-block;
    float: left;
  }
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }
 </style>
</head> 
<body>
  <div>
    <span>Labello 1</span>
    <span>Long Label 2</span>
    <span>Labellebleue 3</span>
    <span class="clearfix"></span>
  </div>
</body>
</html>

它适用于我的简单示例和我的特定用例。

但我仍然有兴趣找出为什么我的原始示例不起作用，即使应用了 Chankey 建议的“跨浏览器内联块”！

【讨论】：