Как избежать th-элемента от наследования свойств от элемента tr в IE6 / 7 - PullRequest
Новая
       14

Как избежать th-элемента от наследования свойств от элемента tr в IE6 / 7

0 голосов
/ 07 мая 2009

У меня есть таблица с повторяющимся фоновым изображением в заголовке: 

thead tr
{
   border-collapse:collapse;
   background: #D3D2D2 url(images/background-table-header.gif) repeat-x top;
}

И это работает как в Firefox, так и в Internet Explorer, но если мы хотим, чтобы определенные заголовки столбцов показывали направление сортировки, мы украшаем th с помощью класса Sorted и Direction. И используйте css для добавления значка направления. 

  thead th.Sorted
  {
     background-repeat: no-repeat;
     background-position: center left;  
     padding-left: 0.6em;   
  }
  thead th.Sorted.Ascending
  {
     background-image: url(images/background-table-sorted-column-ascending.gif);
  }
  thead th.Sorted.Descending
  {
     background-image: url(images/background-table-sorted-column-descending.gif);
  }

Проблема заключается в том, что в Internet Explorer 6 и 7 фоновый цвет из tr наследуется (обнаруживается с помощью панели инструментов Internet Explorer Developer) к th. Это означает, что th закрашивает #D3D2D2 цвет поверх фона tr. Firefox, Chrome и IE8 не имеют этой проблемы, поэтому я подозреваю, что это ошибка IE6 / 7. Я думал об использовании background-color:transparant на thead th.Sorted, но IE6 / 7 просто рисует фон тела (похоже, он прорезает дыру в других слоях между телом и th).

Вот как это должно выглядеть:

correct interpretation of the css/html

А вот как это выглядит в IE6 и IE7:

IE6 and IE7 wrong rendering

Ниже приведен фрагмент кода HTML, который я создал для этого вопроса. 

  <table cellspacing='0'>
    <thead>
      <tr>
        <th>First column</th>
        <th>Second column</th>
        <th class="Sorted Ascending">Third column</th>
        <th>Fourth column</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
  </table>

Как я мог решить это?

Ответы [ 3 ]

2 голосов
/ 07 мая 2009

Кажется, в IE есть ошибка - он отображает фоновое изображение tr как фоновое изображение ячейки, поэтому изображение ячейки переопределяет изображение строки. Та же ошибка существует для элемента thead, но, похоже, хорошо работает с элементом таблицы.
Таким образом, вы можете применить фоновое изображение к таблице вместо строки заголовка: 

table
{
   background: #D3D2D2 url(images/background-table-header.gif) repeat-x top;
}

Поскольку фоновое изображение находится в таблице, оно может выходить за пределы строки заголовка, поэтому вы можете также установить цвет фона tbody или tr s: 

tbody
{
   background-color: #fff;
}
1 голос
/ 07 мая 2009

Похоже, ошибка в IE. Я пробовал без фонового изображения для ячейки: 

thead tr
{
   border-collapse:collapse;
   background-image:url(http://www.freefoto.com/images/1223/09/1223_09_1---Big-Blue-Sky--Montana--USA_web.jpg);
   background-color:gray;
}

  thead th.Sorted
  {
     background-repeat: no-repeat;
     background-position: center left; /** this line changes the position! */  
     padding-left: 0.6em;   
  }

, и фоновое изображение перемещается в эту ячейку! Я полагаю, IE отображает фон строки по одной ячейке за раз.
Возможно, вам придется добавить еще один элемент в ячейку для этого.

ок, другая идея:
Кажется, это работает нормально, если вы поместите фоновое изображение на элемент table. thead также глючит. Вы можете попробовать включить их обоих (таблица и tr), добавив правило: 

table
{
   background: #D3D2D2 url(images/background-table-header.gif) repeat-x top;
}
1 голос
/ 07 мая 2009

Это странно ... потому что это прекрасно работает (хотя я не использую изображения, должно быть то же самое, нет? 

<html>
<head>
    <style type="text/css">
    thead tr{
        background-color:#000;
                    color: #fff;
    }
    th.sorted.Ascending{
        background-color:#fff;
                    color: #000;
    }
    th.sorted.Descending{
        background-color:#AAA;
    }

    </style>
</head>
<body>
    <table>
        <thead>
          <tr>
            <th>First column</th>
            <th>Second column</th>
            <th class="Sorted Ascending">Third column</th>
            <th>Fourth column</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
          </tr>
        </tbody>
    </table>
</body>
</html>

// Редактировать // Возможно, вы захотите сделать это вместо: 

background: #FFFFFF url(http://www.tizag.com/pics/cssT/smallPic.jpg) no-repeat scroll 0 0;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...