Question

我有一个带有三个单选按钮的网页，其中span个元素中的标签设为display: inline-block，所有这些标签都在div样式为float: right。这在除IE8之外的所有浏览器中都很好（当然）。

预期（铬版）：

Chrome screenshot

IE8中的结果：

IE8 screenshot

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

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

毫无疑问，这可以被称为一个错误，但是有一个＆＃34;解释＆＃34;不知怎的？例如。我听说过＆＃34; hasLayout＆＃34; IE的模型，但还没有完全掌握这个概念。

是否存在实现相同效果的跨浏览器方式？我使用inline-block的原因是在元素上使用边距和填充。如果它不适用于IE＆lt; = 7。

，那就没关系

在这个简单的示例中，如果我将span元素替换为具有相同样式的div元素，则问题仍然存在，但如果我将div元素与float: left一起使用，则会消失。这是正确的解决方案吗？在我所有的（相当大的）页面中应用这个之前，在应用此解决方案之前是否应该知道任何事情（基本上，左浮动div和内联块span之间的差异？）< / p>

Answer 1

使用以下内容获取跨浏览器display:inline-block：

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

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

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

它既适用于我的简单示例，也适用于我的特定用例。

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

IE8与浮动div中的内联块元素重叠

2 个答案: