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

Question

Okay, so I am trying to align 5 list items in a row of width 980px.Each of the 5 list items have an anchor tag in them.The anchor tags have a fixed width of 184px and there is 15px padding between two list items.But it is working only in Chrome and Safari. The width in Firefox and IE browsers are showing up as 186px though I have given the fixed width. So,the last list item is coming in to a second row which is not what I wanted.

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

Can't understand why this is working only for two browswers

Answer 1

That is because <a> tag is inline by default and cannot accept height or width properties, you have to make it a block .

Also why are you using display: table-cell for the li s?

This code should work (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;
    }
  }
}

See my jsFiddle .