html – CSS:当设置为tbody / thead时,在Chrome中重复的渐变

前端之家收集整理的这篇文章主要介绍了html – CSS:当设置为tbody / thead时,在Chrome中重复的渐变前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在这里显示了问题.基本上当我把一个梯度放在一个小时,Chrome重复这个渐变的永恒的单元格…实际的期望的结果是什么firefox产生 – 一个坚实的渐变为整个的.

关于如何解决这个问题的任何想法?

这是我有的css:

thead.header {
    font-weight: bold;
    border-bottom: 1px solid #9C9C9C;
    background-repeat: no-repeat;
    background: #C6C6C6;
    background: -moz-linear-gradient(top,#DEDEDE 0%,#BDBDBD 80%,#BBB 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#DEDEDE),color-stop(80%,#BDBDBD),color-stop(100%,#BBB));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DEDEDE',endColorstr='#BBB',GradientType=0 );
}

这是html,如果它有帮助:

<table style="width:100%" cellpadding="0" cellspacing="0">
    <thead class="header">
      <tr>
        <th width="200px">Actor</th>
        <th rowspan="3">Character</th>
      </tr>
      <tr>
        <th>Gender</th>
      </tr>
      <tr>
        <th>Age</th>
      </tr>
    </thead>

    <tbody class="odd">
      <tr>
        <td width="200px">Test</td> 
        <td rowspan="3">Test</table>
        </td>
      </tr> 
      <tr>
        <td>Male</td>
      </tr> 
      <tr>
        <td>25</td>
      </tr>
    </tbody>
  </table>

解决方法

这是一个不幸的问题,但是有一个简单的解决方案将适用于大多数布局:

在表本身上设置渐变,并赋予< td>一个纯色.

小提琴:http://jsfiddle.net/vudj9/

猜你在找的HTML相关文章