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 中时，它不会像下图那样显示原始宽度和高度，

我想在所有 browser.How 中以 chrome 的宽度和高度来解决这个问题？

Answer 1

添加以下内容css：

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

在此处勾选 Fiddle：Fiddle

Answer 2

我认为您在 img 元素上缺少 display: block 属性。默认情况下，浏览器会添加 display: inline.

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

这是一个快速 Fiddle。

Answer 3

如果你想显示默认损坏的图像图标，这是一个选项（这也解决了你的问题）

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

firefox 中的 img 标签宽度高度问题

img tag width height issue in firefox

html

css

image

cross-browser