CSS - Firefox 和 IE 浏览器不采用给定的固定宽度

Question

好的，所以我尝试将 5 个列表项排列成一行，宽度为 980px。5 个列表项中的每一个都有一个 anchor 标记。 anchor 标记的宽度固定为 184px，并且两个之间有 15px 的填充列出元素。但它仅适用于 Chrome 和 Safari。尽管我给出了固定宽度，但 Firefox 和 IE 浏览器中的宽度显示为 186px。所以，最后一个列表项进入第二行，这不是我想要的。

li {

    list-style: none;
    float: left;
    content-align: center;
    padding-right: 15px;

    display: table-cell;

    a{
        width: 184px;
        height: 230px;

        span{
            padding-top: 161px;
            padding-right: 8px;
            padding-left: 8px;
        }

    }

    a:hover {
        text-decoration: none;
    }


}
li:last-child{
    padding-right:0;
}

无法理解为什么这只适用于两个浏览器

Answer 1

那是因为<a>默认情况下标签是内联的，不能接受高度或宽度属性，你必须把它设为 block .

还有你为什么要使用 display: table-cell对于 li秒？

这段代码应该可以工作(SCSS):

ul {
  width: 980px;
  background:red;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
  display: block;
  padding-right: 15px;
  background: blue;
  &:last-child {
    padding-right: 0;
  }
  a {
    width: 184px;
    height: 230px;
    color: #FFF;
    display: block;
    span {
      padding-top: 161px;
      padding-right: 8px;
      padding-left: 8px;
    }
    &:hover {
      text-decoration: none;
    }
  }
}

查看我的 jsFiddle .