html - IE7宽度：自动问题

Question

CSS

    #wrapper .tn{
      width:auto;
      height:20px;
      line-height:20px;
      float:left;
      padding:5px 2px 5px 5px;
      margin:0 5px 10px;
      font-weight:bold;
      background:#f0f0f0;
    }

HTML

    <div id="wrapper">
        <div class="tn">Text</div>
        <div class="tn">Text</div>
        <div class="tn">Text</div>
    </div>

以上代码在 FF,Chrome,Safari,Opera,IE9,IE8 中运行流畅。但是IE7有问题。div 不根据文本扩展。它以宽度覆盖包装器 div。我怎样才能解决这个问题？

Answer 1

对我来说似乎很好，使用 IE7 开发人员工具检查，您可以尝试display: inline-block;代替float

#wrapper .tn{
  height:20px;
  line-height:20px;
  padding:5px 2px 5px 5px;
  margin:0 5px 10px;
  font-weight:bold;
  background:#f0f0f0;
  display: inline-block;
}

Answer 2

我假设您正在谈论的 div 是#wrapper？#wrapper 没有扩展，因为您需要清除浮动

查看 HTML5 Boilerplate (https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css) 中的 clearfix 类

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

所以在你的代码中这样做：

<div id="wrapper" class="clearfix">
    <div class="tn">Text</div>
    <div class="tn">Text</div>
    <div class="tn">Text</div>
</div>