HTML <thead>с разницей рендеринга фонового изображения между IE и Firefox - PullRequest
Новая
       2

HTML <thead>с разницей рендеринга фонового изображения между IE и Firefox

0 голосов
/ 11 августа 2011

У меня есть таблица, закодированная в HTML следующим образом: 

<table border="1" class="tableBasic">
<thead>
    <tr>
        <th rowspan="2">Head Row 1</th>
        <th rowspan="2">Head Row 1</th>
        <th rowspan="2">Head Row 1</th>
        <th colspan="4">Head Row 1</th>
    </tr>
    <tr>
        <th>Head Row 2</th>
        <th>Head Row 2</th>
        <th>Head Row 2</th>
        <th>Head Row 2</th>
    </tr>

</thead>
</table>

Итак, это заголовок таблицы, охватывающий 2 строки. 

.tableBasic thead{
    background: url("/images/tbl_header.png") repeat-x scroll 0 0 transparent;
}

Есть ли разница в рендеринге фонового изображения между IE и Firefox?

В то время как IE отображает фоновое изображение в виде двух строк (т. Е. Равна высоте двух строк), Firefox просто показывает его для первой строки (и не отображает фон для второй строки)

Фоновое изображение достаточно высокое, чтобы охватить 2 строки высоты. К сожалению, я не смогу изменить HTML-код и могу управлять этим только с помощью CSS.

Как мне исправить эту проблему в CSS?

IE enter image description here

Firefox enter image description here

1 Ответ

2 голосов
/ 11 августа 2011

Я думаю, что Firefox делает то, что вы сказали, вы объявили фон для thead и повторили только X, так что это то, что делает Firefox.IE немного обманывает, что делает его лучше, но он не следует вашей декларации css.Поскольку вам нужно решить еще одну небольшую проблему, а именно тот факт, что некоторые клетки выше, чем другие, и одно изображение этого не сделает, я думаю, вам следует рассмотреть возможность нацеливания вашей CSS вместо th элементов.

Возможно, что-то вроде этого: http://jsfiddle.net/JQK2A/1/

Вы можете определить соответствующее фоновое изображение в соответствии с атрибутом colspan или rowspan.

CSS 

.tableBasic thead th {
    background: green url(background.jpg);
}

.tableBasic thead th[rowspan] {
    background: red url(background2.jpg); 
}

.tableBasic thead th[colspan] {
    background: blue url(background3.jpg); 
}

ОБНОВЛЕНИЕ после комментария:

Если вы согласны с использованием CSS 3, вы можете попробовать это (используя только 1 фоновое изображение): 

.tableBasic thead th {
    background: url(background.jpg);
    background-size: 100% 100%; /* CSS 3 */
}
...