Определенное CSS фоновое изображение не отображается в Chrome - PullRequest
Новая
       7

Определенное CSS фоновое изображение не отображается в Chrome

0 голосов
/ 30 мая 2018

Я знаю, что здесь есть масса подобных вопросов, но ни один из них не решает эту проблему для меня.

Код 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, и у нескольких из них есть свои собственные идентификаторы - для иллюстрации я включил один из них.

Нет проблем в IE или Edge.

На Chrome все выглядит хорошо:

enter image description here

Мысли?

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Используйте .DeferredPaymentPopup, input.RefreshImage {...}, потому что RefreshImage не является дочерним элементом для div DeferredPaymentPopup

Правка Это то, что вы намерены достичь?Вместо ввода type="image" я использовал текст 

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

0 голосов
/ 30 мая 2018

Вы можете использовать src атрибут input[type=image]

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

Пояснения к вопросам из комментариев:

Для input[type=image] и imgтеги в chrome, если отсутствует атрибут 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" />
...