Firefox CSS 高度问题答案

【问题标题】：Firefox CSS height issueFirefox CSS 高度问题
【发布时间】：2009-12-16 12:23:33
【问题描述】：

我正在使用一些 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;
}

【问题讨论】：

影子在最新的歌剧中也失败了，仅供参考

标签： html css firefox

【解决方案1】：

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

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

高度确实应该是 70px，因为这是背景图像的高度。填充在 FF 中不起作用。在 FF 中，标签看起来不错，然后在其他版本中，您只需要确保背景是白色的。

将页面中的 css 更改为此 padding-bottom 并且 padding-top 由于所有其他样式在 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">

表 $(文档).ready( 功能（） { $("#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>

【讨论】：

我没有写包含的“styles.css”；）只是html中的东西。我把它交给别人.....

【解决方案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 */
        }

【讨论】：

这是最好的解决方案。我以为它已经在底部了。更简单的是这两行背景： url(mikepuerto.com/iNews/images/...) center bottom no-repeat;背景：url（mikepuerto.com/iNews/images/thead-bg.jpg）底部；而不是中心。
我通常不喜欢具有共享相同值集的字段的快捷方式属性，因为您在不知道之前答案的情况下查看它不知道哪个字段是哪种样式。但是我现在在这里使用它，因为它在原始代码中。

【解决方案3】：

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

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

【讨论】：