div background-image внутри ячейки таблицы не работает в Firefox

Question

div background-image внутри ячейки таблицы не работает в Firefox

0

У меня есть этот код:

<table class="pricetable">
<tbody>
<tr style="background-color: #E6E6E6 !important;">

<td rowspan="4" class="iti">
<div class="itemTableImage" style="background: url(http://www.storagerealm.com/images/intel-ssd-520.jpg) no-repeat; background-size: 100% 100%;"></div>
</td>

<th>Capacity</th>
<th>Price</th>
</tr>
<tr style="border: 1px solid black;">
<td class="cell1">128 GB</td>
<td class="cell2">$129.99</td>

</tr>
<tr style="border: 1px solid black;">
<td class="cell1">256 GB</td>
<td class="cell2">$229.37</td>

</tr>
<tr>
<td class="cell1">512 GB</td>
<td class="cell2">$444.99</td>

</tr>
</tbody>
</table>

и CSS:

.pricetable {
    width: 100%;
    height: 275px;
    border: 3px solid black;
    margin: 0.5em auto 1em; 
    text-align: center; 
    border-collapse:separate; 
    border-spacing:5px 5px;
}

.iti {
    width: 275px;
    background-color: #FBF5EF;
}

div.itemTableImage {
    width: 97%;
    height: 97%;
    margin: 0 auto;

    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

Я доволен результатом в Chrome, Safari и Opera, но Firefox и IE не просматривают образ продукта.

Вот что я получаю в результате в Chrome:

http://oi40.tinypic.com/35hgxuq.jpg

и это то, что я получаю от Firefox:

http://oi40.tinypic.com/ra3vo4.jpg

Ваша помощь приветствуется.

user2838800 02 окт. 2013, в 15:59

Источник

0

Вы получили какое-нибудь решение?
Kiquenet 13 сен. 2017, в 09:55

Теги:

html

css

3 ответа

Ещё вопросы

Вы получили какое-нибудь решение?

SaturnsEye · Answer 1 · 2013-10-02T11-54-00.000Z

Попробуйте background-image: вместо background:

Ankur Dhanuka · Answer 2 · 2013-10-02T11-50-00.000Z

замените это

<td rowspan="4" class="iti">
<div class="itemTableImage" style="background: url(http://www.storagerealm.com/images/intel-ssd-520.jpg) no-repeat; background-size: 100% 100%;"></div>
</td>

с

<td rowspan="4"  class="itemTableImage" style="background: url(http://www.storagerealm.com/images/intel-ssd-520.jpg) no-repeat; background-size: 100% 100%;width: 275px; background-color: #FBF5EF; ">

я протестировал его, показывая изображение как в crome, так и в firefox

Спасибо, я уже пробовал это раньше, но я хотел, чтобы изображение было меньше, чем его контейнер (т.е. td), и чтобы тень окружала изображение, а не контейнер. Вот почему я пошел на div внутри тд. Можете ли вы помочь, пожалуйста?

Calum Gunn · Answer 3 · 2013-10-02T11-05-00.000Z

Возможно, вам придется установить свойства фона отдельно:

background-image: url(http://www.storagerealm.com/images/intel-ssd-520.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;