Question

所以我有这张表http://mikepuerto.com/iNews/ -

我正在使用一些jquery对它进行排序。如果你在任何浏览器中看到这个但是firefox，你会看到表头有一个沿着底部运行的阴影，当你点击一个标题时，一个箭头指向你，表明你正在排序那个列......出于某种原因，firefox没有显示阴影并确实正确地显示箭头......我已经将它缩小到与“th”的高度有关。使用以下样式的高度和填充，它在大多数其他浏览器上工作正常...如果我将高度设置为69px，它只适用于FF;有关为什么会发生这种情况的任何想法？

table.interactiveData thead tr th {
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 0 7px 16px 7px;
    height: 54px;
}

Answer 1

在FF中看起来它是覆盖它之后的第一个表格行。

您可以通过使表格的第一行没有背景颜色并在其顶部添加边距来修复。现在看看。

高度确实应该是70px，因为那是背景图像的高度。填充对FF没有影响。在FF中，标签看起来很好，然后在其他版本中你只需要确保背景为白色。

将页面中的css更改为此填充底部，由于所有其他样式，填充顶部在FF中无效。

            #slim {
            width: 580px;
            margin: 0 auto;
        }
        /* tables */
        table.interactiveData {
            font-family: "Lucida Grande", "Tahoma", "Franklin Gothic Medium", "Arial", Sans-serif;
            background-color: ;
            margin:10px 0pt 15px;
            font-size: 10px;
            width: 100%;
            text-align: left;
            border: 1px solid #dbdbdd;
        }

        table.interactiveData thead tr {
            cursor: pointer;
            background: url(http://mikepuerto.com/iNews/images/thead-bg.jpg);
        }
        table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp {
            background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat;
        }
        table.interactiveData tbody td {
             padding: 7px;
            vertical-align: middle;
        }
        table.interactiveData td.even {
        }
        table.interactiveData tr.odd {
            background-color: #f3f3f3;
        }
        table.interactiveData td.sortedeven {
            background-color:#edf8fa;        
        }

        table.interactiveData td.sortedodd {
            background-color:#edf1f2;            
        }
        table.interactiveData thead tr th {
            color: #fff;
            font-size: 10px;
            font-weight: bold;
            height: 70px;
    padding-left: 5px;
    padding-right: 5px;
        }

特别是#fff作为背景颜色来覆盖红色。

table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp {
        background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat;
    }

然后将其设置为70px高度并仅设置左右边距。如果你想要填充顶部和底部，你必须将它们包裹在一个跨度或另一条路线。

table.interactiveData thead tr th {
            color: #fff;
            font-size: 10px;
            font-weight: bold;
            height: 70px;
    padding-left: 5px;
    padding-right: 5px;
        }

现在可在FF，Chrome，IE和Safari中使用。

完整标记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

表 $（文件）。就绪（ function（）{ $（“＃interactiveData”）。tablesorter（{widgets：['zebra'，'columnHighlight']}）; }

            );
    </script>

    <link rel="stylesheet" href="styles.css" />
    <style>
        #slim {
            width: 580px;
            margin: 0 auto;
        }
        /* tables */
        table.interactiveData {
            font-family: "Lucida Grande", "Tahoma", "Franklin Gothic Medium", "Arial", Sans-serif;
            background-color: ;
            margin:10px 0pt 15px;
            font-size: 10px;
            width: 100%;
            text-align: left;
            border: 1px solid #dbdbdd;
        }

        table.interactiveData thead tr {
            cursor: pointer;
            background: url(http://mikepuerto.com/iNews/images/thead-bg.jpg);
        }
        table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp {
            background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat;
        }
        table.interactiveData tbody td {
             padding: 7px;
            vertical-align: middle;
        }
        table.interactiveData td.even {
        }
        table.interactiveData tr.odd {
            background-color: #f3f3f3;
        }
        table.interactiveData td.sortedeven {
            background-color:#edf8fa;        
        }

        table.interactiveData td.sortedodd {
            background-color:#edf1f2;            
        }
        table.interactiveData thead tr th {
            color: #fff;
            font-size: 10px;
            font-weight: bold;
            height: 70px;
    padding-left: 5px;
    padding-right: 5px;
        }

    </style>
</head>
<body>
    <div id="slim">
    <table id="interactiveData" class="interactiveData" border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr>

                <th>Rank</th>
                <th>Broker-Dealer</th>
                <th>Website</th>
                <th>Discretionary Assets</th>
                <th>Discretionary Assets 2007</th>
                <th>Difference in Discretionary Assets 2007-2009</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>data2b
                    <ul>
                        <li>item1</li>

                        <li>item2</li>
                        <li>item3</li>
                    </ul>
                </td>
                <td>1</td>
                <td>data4d</td>
                <td>data5e</td>

                <td>data5e</td>
            </tr>
            <tr>
                <td>2</td>
                <td>
                    data1f
                    <ul>
                        <li>item1</li>

                        <li>item2</li>
                        <li>item3</li>
                    </ul>
                </td>
                <td>data2g</td>
                <td>data3h</td>
                <td>data4i</td>

                <td>data4i</td>
            </tr>
            <tr>
                <td>3</td>
                <td>data2l
                    <ul>
                        <li>item1</li>
                        <li>item2</li>

                        <li>item3</li>
                    </ul>
                </td>
                <td>data3m</td>
                <td>data4n</td>
                <td>data5o</td>
                <td>data5o</td>

            </tr>
            <tr>
                <td>4</td>
                <td>data2q
                     <ul>
                        <li>item1</li>
                        <li>item2</li>
                        <li>item3</li>

                    </ul>                   
                </td>
                <td>data3r</td>
                <td>data4s</td>
                <td>data5t</td>
                <td>data5t</td>
            </tr>

            <tr>
                <td>5</td>
                <td>data2q
                    <ul>
                        <li>item1</li>
                        <li>item2</li>
                        <li>item3</li>

                    </ul>
                </td>
                <td>data3r</td>
                <td>data4s</td>
                <td>data5t</td>
                <td>data5t</td>
            </tr>

            <tr>
                <td>6</td>
                <td>data2q
                    <ul>
                        <li>item1</li>
                        <li>item2</li>
                        <li>item3</li>

                    </ul>
                </td>
                <td>data3r</td>
                <td>data4s</td>
                <td>data5t</td>
                <td>data5t</td>
            </tr>

        </tbody>
    </table>
    </div>
</body>

Answer 2

尝试设置

background-position:bottom:

在您发布的table.interactiveData thead tr规则之后。

编辑：同样在你需要的下一条规则上（或删除那里的中心），所以这就是你所需要的：

        table.interactiveData thead tr {
            cursor: pointer;
            background: url(images/thead-bg.jpg);
            background-position:bottom;
            background-repeat:repeat-x;
        }
        table.interactiveData thead tr .headerSortDown, 
        table.interactiveData thead tr .headerSortUp {
            background: url(images/thead-hover-bg.jpg) center bottom no-repeat; 
            /* changed to "center bottom", thanks Ryan */
        }

Answer 3

这是以不同方式处理的填充。在Fx中，标题单元格上的填充不会影响单元格的大小，因此高度是指定的54px。

删除标题单元格上的高度设置，并在行上指定高度70px。

Firefox CSS高度问题

3 个答案: