使用 Chrome 时，图像不会显示在 div 中

Question

我创建了一个网站，它在 Firefox 和 IE 上运行良好，但由于某些原因，图像无法显示在 Chrome 上的 div 中。该图像具有正确的 src，因为它适用于所有其他浏览器。如果我将 "product" div 重命名为其他名称，它会随机显示 chrome 中的所有内容，但产品 div 的悬停效果等将不会生效。这是我的代码：

.product {
  float: left;
  margin-left: 20px;
  padding: 5px;
}
.product:hover {
  background-color: #dfdddd;
}
.tinfo {
  width: 300px;
  height: 50px;
  margin-top: -80px;
  position: relative;
}
.buy {
  float: right;
  margin-top: 14px;
}
a.add2 {
  color: #e9e9e9;
  opacity: 1;
  padding: 10px;
  background-color: #282828;
  border: 1px solid #282828;
}
a.add2:hover {
  color: #282828;
  background-color: #e9e9e9;
  text-decoration: none;
  border: 1px solid #282828;
}

<div class="product">
  <img src="images/myImg.png" class="imgSize">
  <div class="tinfo">Product info here
    <br>[=13=].00
    <div class="buy"><a href="cart.php?add=product1" class="add2">Add to cart</a>
    </div>
  </div>
</div>

Answer 1

使用这个：

<div class="product">
  <img src="~/images/myImg.png" class="imgSize">
  <div class="tinfo">Product info here
    <br>[=10=].00
    <div class="buy"><a href="cart.php?add=product1" class="add2">Add to cart</a>
    </div>
  </div>
</div>

使用 Chrome 时，图像不会显示在 div 中

Image wont show in div when using Chrome

html

css

google-chrome