代码之家 › 专栏 › 技术社区 › Davy Landman

如何避免th元素从IE6/7中的tr元素继承属性

css cross-browser html

Davy Landman · 技术社区 · 16 年前

我有一个表格的标题上有一个重复的背景图像:

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

这在Firefox和InternetExplorer中都适用,但是如果我们想让某些列标题显示排序方向,我们就用已排序的类和方向来装饰th。并使用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);
  }

问题是在InternetExplorer6和7中,tr的背景色被继承(使用InternetExplorerDeveloper工具栏找到)到th。也就是说,第四次世界大战 #D3D2D2 tr背景上的颜色。Firefox、Chrome和IE8没有这个问题,所以我怀疑这是IE6/7的错误。我想用一个 background-color:transparant 上 thead th.Sorted

它应该是这样的:

这就是IE6和IE7中的情况:

  <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 回复 | 直到 6 年前

Kobi 16 年前

IE似乎有一个bug——它使 tr thead 元素,但它似乎与table元素配合得很好。
因此,您可以将背景图像应用于表格而不是标题行:

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

由于背景图像位于表格上,因此它可能超出标题行,因此您可能还需要设置表格的背景颜色 tbody 或其 tr s:

tbody
{
   background-color: #fff;
}

SeanJA 16 年前

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

Kobi 16 年前

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前