Question

I have a list of 5 items which are floated left, and displayed inline. on the 4rd item, I set clear left, thereby causing the 4th item into a new line.

但是在 IE7 中, 第5项在第一行的第3项旁边浮动, 而不是在新行的第4项旁边浮动。如何让这个为 IE7 工作?

jsfidd.net/3dSSSP/4/

Answer 1

我见过很多次了不幸的是我所知道的唯一解决办法就是有一个分离的清空元素来清除浮标

丑陋却有效:

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li class="clear">&nbsp;</li>
  <li>List 4</li>
  <li>List 5</li>
</ul>

CSS :

.clear{
  display: block;
  float: none;
  clear: both;
  height: 1px;
  line-height: 1px;
  font-size: 1px;
}

字体声明将确保清除 div 的像素只有1 个高, 否则它将会是当前字体大小( yay!) 的高度。

由于这只是IE7, 我将保持您的标记清除, 并在此额外加插动态的 Javascript, 用于 just & lt; IE8 。

友情链接