Html IE7宽度：自动发布

CSS

HTML

正文
正文
正文

---

上述代码在FF、Chrome、Safari、Opera、IE9、IE8中运行顺畅。但IE7有一个问题。Div不根据文本展开。它以宽度覆盖包装Div。如何修复此问题？

对我来说似乎很好，使用IE7开发者工具检查，您可以尝试

显示：内联块而不是浮动

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

---

我猜你说的那个部门是“包装工”#包装器没有展开，因为您需要清除浮动

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

因此，请在代码中执行以下操作：

.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;
}

正文
正文
正文

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

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