IE7 Проблема с отображением изображений с родительским и дочерним фоном

Question

У меня проблема с отображением таблицы IE7 (не беспокойтесь, она используется для табличных данных), где в строке таблицы есть фоновое изображение, которое повторяется по оси x и разделение таблицы (в данном случае TH) имеет отдельное фоновое изображение, которое вообще не повторяется.

Вот пример:

http://cdn.bkit.ca/misc/juniors-table-problem.png

Вот CSS:

<style> 

table, 
td, 
th, 
tr { 
    border: none; 
} 

table tr { 
    border-bottom: 1px solid #BEBEBE; 
} 

table td { 
    padding: 7px; 
    border-left: 1px solid #BEBEBE; 
    border-right: 1px solid #BEBEBE; 
} 

table th { 
    padding: 7px; 
    text-align: left; 
} 

table .header { 
    background-image: url(/images/layout/nav_background.png); 
    background-position: top; 
    background-repeat: repeat-x; 
    height: 37px; 
    border: none; 
    margin: 2px; 
} 

table .header th { 
    color: white; 
    font-weight: normal; 
    text-align: center; 
} 

table .header th.first { 
    background-color: transparent; 
    background-image: url(/images/layout/nav_left.png); 
    background-repeat: no-repeat; 
    background-position: top left; 
} 

table .header th.last { 
    background-image: url(/images/layout/nav_right.png); 
    background-repeat: no-repeat; 
    background-position: top right; 
    background-color: transparent; 
} 

</style> 

А вот HTML:

<table> 
    <tr class="header"> 
     <th class="first">a</th> 
     <th>b</th> 
     <th class="last">a</th> 
    </tr> 
</table> 

Пожалуйста, не наказав мой CSS, некоторые из это «спрей и молясь». CSS надеется, что что-то это исправит.

Так что я не могу на всю жизнь понять, почему у меня есть эта проблема. IE8 Не имеет такой же проблемы.

Любые идеи?

Answer 1

Если изображение, которое вы опубликовали, представляет собой скриншот первых двух ячеек вашей таблицы, проблема в том, что, вероятно, первая ячейка вторая строка изменяет размер столбца. Таким образом, ваша ячейка, назовите ее 0x0, будет изменена как содержимое всех ячеек ниже в столбце.

Нам всегда нужно думать умным, если речь заходит об использовании повторяющихся фонов, если бы я был вами, я бы создал 2 отдельных фоновых изображения (проверьте изображение внизу этого сообщения, я не могу его здесь поместить это ломает мой код ...).

Затем, используя эти стили:

table .header { 
     background:none 
     height: 37px; 
     border: none; 
} 
table .header th.first { 
     background: url(/images/layout/[my-image-2].png) left no-repeat; 
} 

table .header th.last { 
     background: url(/images/layout/[my-image-2].png) right no-repeat; 
} 

table .header th.middle { 
     background: url(/images/layout/[my-image-1].png) repeat-x; 
} 

<table> 
    <tr class="header"> 
      <th class="first">a</th> 
      <th class="middle">b</th> 
      <th class="last">a</th> 
    </tr> 
    <tr> 
     <td>this cell is resizing cell above</td> 
     <td>content</td> 
     <td>this cell is resizing cell above</td> 
    <tr> 
</table> 

То, что мы делаем здесь:

1. удалить фон из tr элемента, tr не принимает фона.
2. Set background no 2 в средней части и повторите его в направлении x.
3. Используйте наш номер фона 1 на ячейке .first и выровняйте его влево, и сделайте то же самое на .last и выровняйтесь по правому краю.

Если ваши .first и .last длиннее, чем мой пример, вы можете просто расширить изображение.

Это должно решить вашу проблему.

Answer 2

Первые классы/классы могут перекрывать фон tr. Можете ли вы расширить ширину ваших левых/правых png, чтобы они расширялись, чтобы покрыть всю ячейку?