奇怪的响应图像网格FireFox

Question

我有一个奇怪的问题是firefox（不是google或safari），当你移动窗口时，你在图像的两侧获得1px的边距。我不知道如果这是firefox中的一个错误，或者我错过了什么，但它真的很烦我。

更新：第一个问题是通过对Firefox进行简单更新修复的，但是在添加转换以更改不透明度后问题又回来了。

＆＃13;

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
 html,
body,
ul {
  padding: 0;
  margin: 0;
}
body {
  font-family: "Open Sans";
}
ul:after {
  content: "";
  display: table;
  clear: both;
}
li {
  position: relative;
  display: block;
  float: left;
  width: 25%;
  background-color: pink;
}
li img {
  display: block;
  width: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
li .text {
  position: absolute;
  color: white;
  left: 0;
  top: 60%;
  width: 100%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  text-align: center;
  opacity: 0;
}
li .text h1 {
  margin: 0px;
  font-weight: 300;
  font-size: 20px;
}
li:hover img {
  opacity: 0.3;
}
li:hover .text {
  opacity: 1;
}

＆＃13;

<ul>
  <li>
    <img src="http://lorempixel.com/200/200/">
    <div class="text">
      <h1>"Rubber Ducky"</h1>
      <small>001</small>
    </div>
  </li>
  <li>
    <img src="http://lorempixel.com/200/200/">
    <div class="text">
      <h1>"Rubber Ducky"</h1>
      <small>001</small>
    </div>
  </li>
  <li>
    <img src="http://lorempixel.com/200/200/">
    <div class="text">
      <h1>"Rubber Ducky"</h1>
      <small>001</small>
    </div>
  </li>
  <li>
    <img src="http://lorempixel.com/200/200/">
    <div class="text">
      <h1>"Rubber Ducky"</h1>
      <small>001</small>
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;