CSS tr фон не работает IE7 - PullRequest
Новая
       41

CSS tr фон не работает IE7

0 голосов
/ 16 ноября 2011

Свойство tr tr не работает в IE7.Я хочу, чтобы bgcolor строки чередовался, а затем изменил его цвет, когда мышь находится в строке.Поэтому я не могу использовать таблицу tbody tr.d1 td{background:#f1f1f1;}, потому что tbody tr.d1 td:hover{background:#f1f1f1;} будет влиять только на цвет ячейки, а не на всю строку ... Кто-нибудь имеет представление о том, как заставить этот код работать?: 

<html>
    <head>  
      <script type="text/javascript" src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js" ></script>      
      <style type="text/css">
        table tbody tr.d1 td{background:transparent;}
        table tbody tr.d2 td{background:transparent;}
        table tbody tr.d1{background:#f1f1f1; color:#363636;}
        table tbody tr.d2{background:white; color:#363636;} 
        table tbody tr.d1:hover, tr.d2:hover{background:#FFF5C3; color:#FF7260;} 
      </style>        
    </head>
<body>  
    <table  class="sortable">
      <thead> 
        <tr>
          <th >Index</th> 
          <th><span class="nowrap">Parameter Name</span></th>
          <th><span class="nowrap">Parameter Value</span></th>
          <th><span class="nowrap">Page Name</span></th>
          <th ><span class="nowrap">Page Name</span></th>
          <th ><span class="nowrap">Page Name</span></th>
          <th ><span class="nowrap">Page Name</span></th>
          <th class="sorttable_nosort scrollbarCol"></th> 
        </tr>
      </thead>  
      <tbody>
            <tr class="d1">
              <td>4_1</td> <td>gfryn</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td>
            </tr>
            <tr class="d2">
              <td>4_2</td> <td>aegr</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> 
            </tr>
            <tr class="d1">
              <td>4_3</td> <td>ryj</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td>
            </tr>
            <tr class="d2">
              <td>4_4</td> <td>styj</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td>
            </tr>
            <tr class="d1">
              <td>4_5</td> <td>rth</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td>
            </tr>
            <tr class="d2">
              <td>4_6</td> <td>srhfr</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td>
            </tr>
            <tr class="d1">
              <td>4_7</td> <td>sryh</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> 
            </tr>
            <tr class="d2">
              <td>4_8</td> <td>et5h</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> 
            </tr>
      </tbody>
    </table>
  </body>
</html>

[EDIT]
как будет выглядеть обходной путь javascript?

Ответы [ 3 ]

2 голосов
/ 16 ноября 2011

IE7 всегда является головной болью, я не знаю, почему IE7 понимает background:transparent таким образом, но с *background-color:none наконец-то работает:

http://jsfiddle.net/NAGyt/1/

И для td:hover Я надеюсь, что это может быть полезно для вас:

http://jsfiddle.net/NAGyt/2/

В любом случае, проверьте эти ссылки для получения дополнительной информации о :hover в IE7.

0 голосов
/ 16 ноября 2011

Код, который вы вставили, кажется, отлично работает в IE7 с чередующимся цветом строки и изменением цвета фона при наведении курсора.

Для IE7 вы используете IE8 с панелью инструментов разработчика для тестирования своего кода.Если да, то попробуйте установить:

Режим браузера: IE 7 Режим документа: Стандарты IE 7

По умолчанию режим документа переключается в режим Quirks, когда вы изменяете режим браузера на IE 7. Такустановите обе настройки и затем проверьте свой код.

0 голосов
/ 16 ноября 2011

попробуйте это:

OLD: таблица tbody tr.d1: hover td, tr.d2: hover td {background-color: # FFF5C3; цвет: # FF7260;} 

  table tbody tr:hover, tr:hover td {background-color:#FFF5C3; color:#FF7260;}

замените его в своем коде: 
<style>
        table tbody tr.d1{background-color:#f1f1f1; color:#363636;}
        table tbody tr.d2{background-color:white; color:#363636;} 
        table tbody tr:hover, tr:hover td{background-color:#FFF5C3; color:#FF7260;} 
</style>

Обходной путь js (jQuery) 
$(tr).hover( 
  function() {
    $(this).toggleClass("highlight");
  }
);

CSS: 

.highlight {background-color:#FFF5C3; color:#FF7260;}
...