1

我熟悉清除浮动的基础知识，但在这种情况下我有点难过，我希望有人能帮助我。

对于这个页面，我有一个名为 containerTimeline 的容器，它应该包含所有内容。内容当然不包含在容器中。奇怪的是，在 Firefox 上它可以正常工作，但在 Safari 和 Chrome 上却没有。有谁知道为什么？哪个浏览器正确呈现它？

我有一个指向 jsfiddle http://jsfiddle.net/T8n4v/的链接

这是下面的一些代码：

    <div class="containerTimeline">
    <div class="year">
        <header>2012</header>
    <div class="month alt">
    <header>Sep</header>
    <ul class="events">
    <li class="event priority1"></li>
    <li class="event priority3"></li>
    </ul>
</div>
    <div class="month">
    <header>Oct</header>
    <ul class="events">
    <li class="event priority1"></li>
    <li class="event priority3"></li>
    </ul>
</div>
    <div class="month alt">
    <header>Nov</header>
    <ul class="events">
    <li class="event priority1"></li>
    <li class="event priority3"></li>
    </ul>
</div>
    <div class="month">
    <header>Dec</header>
    <ul class="events">
    <li class="event priority1"></li>
    <li class="event priority3"></li>
    </ul>
</div>
    <div class="month alt">
    <header>Jan</header>
    <ul class="events">
    <li class="event priority1"></li>
    <li class="event priority3"></li>
    </ul>
</div>
    <div class="month">
    <header>Feb</header>
    <ul class="events">
    <li class="event priority1"></li>
    <li class="event priority3"></li>
    </ul>
</div>
    </div><!-- end year -->
</div>

及其CSS：

    body {
      width: 4800px;
    }
    .containerTimeline {
      outline:1px solid red;
      margin: 20px;
      min-height: 100%;
      position: relative;
      width: auto;
    }
    .containerTimeline .year {
      float: left;
      height: 41px;
      background: #e8e8e8;
    }
    .containerTimeline .year header{
      text-align: center;
      color: #666;
      font-size: 15px;
      text-transform: uppercase;
      padding: 10px 0;
    }
    .containerTimeline .month {
      width: 43px;
      float: left;
      background: #fff;
    }
    .containerTimeline .month.alt {
      width: 43px;
      float: left;
      background: #e8e8e8;
    }
    .containerTimeline .month header {
       height: 20px;
       width: 43px;
    }
    .containerTimeline .events {
      margin-top: 10px;
      position: relative;
    }
    .containerTimeline .event {
      position: relative;
      display: block;
      width: 36px;
      height: 36px;
      margin: 20px auto;
      margin-bottom: 25px;
      border-radius: 3px;
      border:1px solid black;
    }
    .group:before,
    .group:after {
    content:"";
    display:table;
   }
   .group:after {
    clear:both;
    }​

提前感谢您的帮助。

4

0 回答 0