CSS

Question

我知道这里有很多类似的问题，但 none 似乎为我解决了这个问题。

css代码：

/*Deferred Payment Popup*/
div.DeferredPaymentPopup {
}

div.DeferredPaymentPopup input.RefreshImage {
    background-image: url(../Images/Refresh-icon.png);
    background-position: left top;
    display: inline-block;
    float: left;
    width: 15px;
    height: 18px;
}

页面上的代码 -

<div id="DeferredPaymentPopup" class="DeferredPaymentPopup newportal popup" title="Deferred Payment Calculator">
<div data-bind="with: statement.viewModel.DeferredPaymentModel">
...
  <div id="divDollarCalc">
    <div style="float: left; padding-left: 4px">
    <input type="image" onclick="return false;" title="Refresh" class="RefreshImage" />
    </div>
  </div>

页面上有许多嵌套的 div，其中几个有自己的 ID - 我包括其中一个以供说明。

在 IE 或 Edge 中没有问题。

在 Chrome 中检查时一切看起来都很好：

想法？

Answer 1

您可以使用 input[type=image]

的 src 属性

<input type="image" src="../Images/Refresh-icon.png" />

对评论中问题的澄清：

对于chrome中的input[type=image]和img标签，如果没有src属性或无效的src属性，浏览器显示损坏的图标图片不是背景，这就是为什么你不能从 css 背景覆盖它。

然而 img 标签在根本没有 src 属性时不显示图标，它仅在 src 的值无效时显示。

但是对于 input[type=image] 它甚至在没有 src 属性时也会出现，这种行为对于 img 和 input[type=image] 是不同的。

我不知道这背后的确切原因，但我的猜测是 src 对 img 是可选的，但对 input[type=image] 不是。

根据 input[type=submit] 不工作的问题，如果您可以提供您尝试过的新代码，我们应该能够帮助您。

这是一个展示其工作原理的小实验

<p><strong>input type="image"</strong></p>

<p>Without src</p>
<input type="image" style="display:inline-block;width:  40px;height: 40px;background: #000;"/>

<p>With src</p>
<input type="image" style="display:inline-block;width:  40px;height: 40px;background: #000;" src="https://static-cdn.jtvnw.net/jtv_user_pictures/e91a3dcf-c15a-441a-b369-996922364cdc-profile_image-300x300.png"/>

<br />
<br />
<p><strong>input type="submit"</strong></p>
<p>With background</p>
<input type="submit" style="display:inline-block;width:  40px;height: 40px;background: #000;"/>

<br />
<br />
<p><strong>img</strong></p>

<p>Without src</p>
<img style="display:inline-block;width:  40px;height: 40px;background: #000;"/>

<p>With empty src</p>
<img style="display:inline-block;width:  40px;height: 40px;background: #000;" src />

<p>With invalid src</p>
<img style="display:inline-block;width:  40px;height: 40px;background: #000;" src="//avcs" />

<p>With valid src</p>
<img style="display:inline-block;width:  40px;height: 40px;background: #000;" src="https://static-cdn.jtvnw.net/jtv_user_pictures/e91a3dcf-c15a-441a-b369-996922364cdc-profile_image-300x300.png" />

Answer 2

使用 .DeferredPaymentPopup，input.RefreshImage{...} 因为 RefreshImage 不是 DeferredPaymentPopup 的子项 div

编辑这是你想要达到的目标吗？我没有输入 type="image" ，而是使用了 text

div.DeferredPaymentPopup {}

div.DeferredPaymentPopup input.RefreshImage {
  background: url("http://res.cloudinary.com/sayob/image/upload/v1526907328/483257_vwhhfw.jpg") no-repeat left top;
  display: inline-block;
  float: left;
  width: 100px;
  height: 18px;
}

<div id="DeferredPaymentPopup" class="DeferredPaymentPopup newportal popup" title="Deferred Payment Calculator">
  <div data-bind="with: statement.viewModel.DeferredPaymentModel">
    
    <div id="divDollarCalc">
      <div style="float: left; padding-left: 4px">
        <input type="text" onclick="return false;" title="Refresh" class="RefreshImage" />
      </div>
    </div>
  </div>
</div>

使用 .DeferredPaymentPopup, input.RefreshImage{...} 因为 RefreshImage 不是 DeferredPaymentPopup div

的子项

CSS - 定义的背景图像在 Chrome 中不显示

CSS-defined background image doesn't display in Chrome

background-image