Firefox中的img旁边会出现额外的空格

Question

我使用max-width：100％;和最大高度：100％;为我的img标签。 img周围有一个容器，由于某种原因，右边的图像旁边会出现额外的空格。

容器的宽度不固定，所以它应该是相同的，就像每侧的图像+ 15px填充。

CSS

    *, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  list-style:none;
  margin:0;
  padding:0;
}

li {
  height:100px;
  display: inline-block;
  background: lightblue;
  padding: 15px;
}

img {
  max-width:100%;
  max-height:100%;
}

HTML

<ul>
  <li><img src="http://lorempixel.com/1450/600/"></li>
</ul>

Codepen：http://codepen.io/anon/pen/mJJqzo

Answer 1

您需要相同的填充而不更改宽度。 CSS后面的评论：

/*-moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;*/

See DEMO在 FF 和 Chrome 中显示相同的输出。

Answer 2

请尝试以下css：

li {
    background: lightblue none repeat scroll 0 0;
    display: inline-block;
    height: 100px;
    padding: 15px;
    width: 204px;
}
img {
   height: auto;
   width: 100%;
}

Answer 3

一种可能的解决方案是做这样的事情：

li {
padding: 0px;
}

img {
padding: 0px;
}

由于您说图像不需要修改大小，因此只需删除填充可能是删除空白区域的一种方法。

Answer 4

使用CSS重置，它将修复您可能遇到的所有内容。我建议Eric Meyer's。

<?php
    $file = fopen("res/changelog","r");
    echo "<p>";
    while(! feof($file))
    {
        $line = fgets($file);
        if (substr($line, 0, 1) === "#")
        {
            echo "</p><h2>", substr($line, 1), "</h2><p>";
        }
        else
        {
            echo $line, "<br />";
        }
    }
    echo "</p>";
    fclose($file);
?>

Answer 5

为li添加宽度。

li{ width:200px; }