摇摆不定的宽度误判？

Question

问题:有一个带有css的照片库：

ul.photo-grid { 
  margin: 0px 0px 0px -10px;
  padding: 0px;
  min-width: 840px;
}

ul.photo-grid > li.photo {
  display: inline-block; 
  width: 25%; 
  min-width: 210px;
  text-align: center;
  padding-left: 10px;
  margin: 0px 0px 10px 0px;

  vertical-align: baseline !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

使用这样的html：

<ul class="photo-grid">
   <li class="photo">
      <a href="#" class="photo-link">
        <img src="img/150x200.jpg" class="photo-img"/>
        <span class="photo-title">a girl</span>
      </a>
  </li>...

有趣的是，在chrome，firefox，opera中工作得很好，例如:显示了4个完美的列，但在jsfiddle中却没有(显示3列)！有什么线索吗？

Answer 1

不要在<li>之间留下任何空间。当您添加规则display:inline-block时。这在两个<li>之间提供了一点空间。像这样写。

<ul class="photo-grid">
   <li class="photo">
      <a href="#" class="photo-link">
        <img src="http://tracy.titanserver2.com/tph/getPhoto.php?uid=5358029&num=1&type=3" width="150" class="photo-img"/>
        <span class="photo-title">a girl</span>
      </a>
  </li
    ><li class="photo">
      <a href="#" class="photo-link">
        <img src="http://tracy.titanserver2.com/tph/getPhoto.php?uid=5358029&num=1&type=3" width="150" class="photo-img"/>
        <span class="photo-title">a girl</span>
      </a>
  </li
    ><li class="photo">
      <a href="#" class="photo-link">
        <img src="http://tracy.titanserver2.com/tph/getPhoto.php?uid=5358029&num=1&type=3" width="150" class="photo-img"/>
        <span class="photo-title">a girl</span>
      </a>
  </li
    ><li class="photo">
      <a href="#" class="photo-link">
        <img src="http://tracy.titanserver2.com/tph/getPhoto.php?uid=5358029&num=1&type=3" width="150" class="photo-img"/>
        <span class="photo-title">a girl</span>
      </a>
  </li>
    </ul>

请检查一下这个小提琴或您的小提琴改良。看看html和css。