在Firefox中img标签宽度高度问题

Question

我的HTML代码中有更多img标记，如下面的代码，

    <div id="container" >
    <div>
        <img alt="Image1" id="Image1" src="" width="130px" height="90px" class="img">
         <input type="file" id="files1" class="fileUpload" name="files1[]" style="display:none" value="Select Image"> 
        <br>
        <br>
        <img alt="Image2" id="Image2" src="" width="130px" height="90px" class="img">
         <input type="file" id="files2" class="fileUpload" name="files1[]" style="display:none" value="Select Image"> 
        <br>
        <br>
        <img alt="Image3" id="Image3" src="" width="130px" height="90px" class="img">
         <input type="file" id="files3" class="fileUpload" name="files1[]" style="display:none" value="Select Image"> 
        <br>
        <br>
        <img alt="Image4" id="Image4" src="" width="130px" height="90px" class="img">
         <input type="file" id="files4" class="fileUpload" name="files1[]" style="display:none" value="Select Image"> 
        <br>
        <br>
        <img alt="Image5" id="Image5" src="" width="130px" height="90px" class="img">
         <input type="file" id="files5" class="fileUpload" name="files1[]" style="display:none" value="Select Image"> 
        <br>
        <br>
    </div>
</div>

更新：

MyCSSsoFar.css

#container {
  width: 600px;
}

#container div {
  float: left;
  height: 300px;
  width: 300px;
}

当我在chrome上运行它时，它的宽度高度如下图所示

但是当我在firefox中运行时，它不会显示原始宽度和高度，如下图所示，

我希望在所有浏览器中显示其宽度和高度，如chrome。如何解决此问题？

Answer 1

我认为您错过了display: block元素的img属性。默认情况下，浏览器会添加display: inline。

img {
    border: 1px solid red;
    display: block;
}

这里快速Fiddle。

Answer 2

添加以下css：

.img{
    display:block;
    border:1px solid;
}

在这里查看小提琴：Fiddle

Answer 3

如果您想要显示默认的损坏图像图标（这也可以解决您的问题），可以选择Heres

img{
    -moz-force-broken-image-icon:1;
}