如何用CSS Float实现横向滚动项？兼容IE代码错误排查

我帮你梳理下代码里的几个关键问题，以及对应的修复方案：

一、核心错误点分析 #

1. HTML语法错误：所有元素的class属性都写错了闭合符号，比如<div class='bar'}>里的}应该是>，这种语法错误会导致IE浏览器无法正确解析DOM结构，样式自然失效。
2. HTML结构错误：每个.box外面都嵌套了一个独立的块级<div>，块级元素默认独占一行，哪怕.box设置了float:left，也只能在各自的父块级元素里排列，根本无法横向连成一排。
3. CSS逻辑错误：.bar设置了float:left没必要，而且直接在.bar里放浮动元素时，没有一个能被内容撑开宽度的内部容器——.bar作为块级元素宽度是父容器的100%，当内部浮动元素总宽度超过时，它们会自动换行，而不是触发.bar的横向滚动。

二、修复后的完整代码 #

CSS部分 #

.bar {
  background-color: rgb(250, 250, 250);
  min-width: 100%;
  height: 62px;
  padding-top: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* 移除不必要的float:left，滚动容器不需要脱离文档流 */
}

/* 新增内部容器，用来撑开宽度触发滚动 */
.bar .scroll-inner {
  float: left;
  width: auto; /* 自动适应内部所有.box的总宽度 */
}

.box {
  float: left;
  height: 46px;
  width: calc(12.5% - 8px); /* IE9+支持calc，兼容IE8需换成固定宽度 */
  border-radius: 3px;
  background-color: rgba(0, 123, 45, 1);
  box-shadow: 0 3px 4px 0 rgba(211, 246, 250, 1);
  text-align: center;
  margin-left: 13px;
  padding: 5px;
  /* 移除display:block，浮动元素默认就是块级 */
}

/* 去掉第一个.box的左边距，避免容器左侧留白 */
.box:first-child {
  margin-left: 0;
}

.day {
  display: block;
  opacity: 0.76;
  color: rgba(255, 255, 255, 1);
  font-size: 11px;
  line-height: 13px;
}

.date {
  display: block;
  color: rgba(255, 255, 255, 1);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
}

HTML部分 #

<div class='bar'>
  <div class='scroll-inner'>
    <div class='box'>
      <div class='day'>monday</div>
      <div class='date'>25</div>
    </div>
    <div class='box'>
      <div class='day'>tuesday</div>
      <div class='date'>26</div>
    </div>
    <div class='box'>
      <div class='day'>wednesday</div>
      <div class='date'>27</div>
    </div>
    <div class='box'>
      <div class='day'>thursday</div>
      <div class='date'>28</div>
    </div>
    <div class='box'>
      <div class='day'>friday</div>
      <div class='date'>29</div>
    </div>
    <div class='box'>
      <div class='day'>saturday</div>
      <div class='date'>30</div>
    </div>
    <div class='box'>
      <div class='day'>sunday</div>
      <div class='date'>1</div>
    </div>
    <div class='box'>
      <div class='day'>monday</div>
      <div class='date'>2</div>
    </div>
  </div>
</div>

三、IE兼容性补充说明 #

• 如果需要兼容IE8，需要做以下调整：
  1. 把width: calc(12.5% - 8px)替换为固定宽度（比如width: 110px），因为IE8不支持calc()。
  2. 把rgba()颜色替换为十六进制+IE滤镜，比如background-color: #007b2d;（如果需要半透明，再加filter: alpha(opacity=76);对应opacity值）。
  3. -ms-overflow-style: -ms-autohiding-scrollbar是IE10+的属性，IE8只能显示默认滚动条。

内容的提问来源于stack exchange，提问作者user10169731