CSS tr 背景在 IE7 下不起作用

发布于 2024-12-15 15:30:44 字数 3670 浏览 3 评论 0原文

tr 背景属性似乎在 IE7 中不起作用。我想让该行的背景颜色交替，然后当鼠标位于该行上时使其具有不同的颜色。所以我不能使用表 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>

[编辑]
javascript 解决方法会是什么样子？

原文

The tr background property doesn't seem to work in IE7. I want to make the bgcolor of the row alternating and then have it a different color when the mouse is on the row. So I can't use table tbody tr.d1 td{background:#f1f1f1;} because tbody tr.d1 td:hover{background:#f1f1f1;} will only affect the color of the cell, not the whole row...
Anyone has an idea on how to make this code work?:

<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]
what would a javascript workarround look like?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

简美 2024-12-22 15:30:44

IE7总是令人头疼，我不知道为什么IE7会以这种方式理解background:transparent，但使用*background-color:none最终可以工作：

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

我希望 td:hover这可能会有帮助适合您：

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

无论如何，请查看这些链接，了解有关 IE7 中 :hover 的更多信息。

回复收藏 0 原文

妥活 2024-12-22 15:30:44

试试这个：

旧：表 tbody tr.d1：悬停 td，tr.d2：悬停 td {背景颜色：#FFF5C3;颜色：#FF7260;}

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

replace it in your code:

<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>

the js (jQuery) workaround

$(tr).hover( 
  function() {
    $(this).toggleClass("highlight");
  }
);

CSS：

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

try this:

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

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

replace it in your code:

<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>

the js (jQuery) workaround

$(tr).hover( 
  function() {
    $(this).toggleClass("highlight");
  }
);

css:

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

回复收藏 0 原文

疧_╮線 2024-12-22 15:30:44

您粘贴的代码似乎在 IE7 中完美工作，悬停时交替行颜色和背景颜色变化。

对于 IE7，您是否使用带有开发人员工具栏的 IE8 来测试您的代码。如果是，则尝试将：

浏览器模式设置为：IE 7
文档模式：IE 7 标准

默认情况下，当您将浏览器模式更改为 IE 7 时，文档模式将变为 Quirks 模式。
因此，设置这两个设置，然后测试您的代码。

回复收藏 0 原文

~没有更多了~

关于作者

心奴独伤

暂无简介

文章

27 人气

关注发私信

友情链接

文江博客

CSS tr 背景在 IE7 下不起作用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

动次打次papapa

我是有多爱你

原来分手还会想你

linces

霓裳挽歌倾城醉

玍銹的英雄夢

友情链接

CSS tr 背景在 IE7 下不起作用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

动次打次papapa

我是有多爱你

原来分手还会想你

linces

霓裳挽歌倾城醉

玍銹的英雄夢

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。