Html Firefox CSS高度问题_Html_Css_Firefox

Html Firefox CSS高度问题

html css firefox

Html Firefox CSS高度问题,html,css,firefox,Html,Css,Firefox,所以我有这张桌子- 我正在使用一些jquery对其进行排序。如果您在除firefox以外的任何浏览器中查看此项，您将看到表格标题底部有一个阴影，当您单击标题时，一个箭头指向下方，指示您正在对该列进行排序。。。由于某些原因，firefox没有显示阴影，并且正确地显示了箭头。。。我把范围缩小到与“th”的高度有关。以下样式的高度和填充在大多数其他浏览器上都能正常工作。。。如果我将高度设置为69px，它只能在FF中工作；你知道为什么会这样吗 table.interactiveData thead tr

所以我有这张桌子-

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

看起来在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">

桌子 $（文件）。准备好了吗( 函数（）{ $（“#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>

）；
#苗条的{
宽度：580px；
保证金：0自动；
}
/*桌子*/
表1.interactiveData{
字体系列：“Lucida Grande”、“Tahoma”、“Franklin哥特式媒体”、“Arial”、无衬线；
背景色：；
利润率：10px 0pt 15px；
字体大小：10px；
宽度：100%；
文本对齐：左对齐；
边框：1px实心#dbdd；
}
表4.2.1.1.1.1.2.2.2.2.2.2.2.1.2.2.2.2.2.2.1.1.2.2.2.2.2.2.2.2{
光标：指针；
背景：url(http://mikepuerto.com/iNews/images/thead-bg.jpg);
}
table.interactiveData thead tr.headerSortDown，table.interactiveData thead tr.headerSortUp{
背景：#fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg)中心不重复；
}
table.interactiveData tbody td{
填充：7px；
垂直对齐：中间对齐；
}
table.interactiveData td.even{
}
table.interactiveData tr.odd{
背景色：#F3；
}
表4.interactiveData td.SortedEvent{
背景色：#edf8fa；
}
表1.interactiveData td.Dodd{
背景色：#edf1f2；
}
表4.2.1交互数据和tr th{
颜色：#fff；
字体大小：10px；
字体大小：粗体；
高度：70像素；
左侧填充：5px；
右侧填充：5px；
}
等级
经纪商
网站
自由支配资产
自由支配资产2007
2007-2009年可自由支配资产差异
1.
数据2B

项目1
项目2
项目3

1.
数据4d
数据5e
数据5e
2.
数据1f

项目1
项目2
项目3

数据2G
data3h
数据4i
数据4i
3.
数据2L

项目1
项目2
项目3

data3m
数据4n
数据5O
数据5O
4.
数据2q

项目1
项目2
项目3

数据3R
数据4
数据5t
数据5t
5.
数据2q

项目1
项目2
项目3

数据3R
数据4
数据5t
数据5t
6.
数据2q

项目1
项目2
项目3

数据3R
数据4
数据5t
数据5t

在FF中，似乎是th之后的第一个表行覆盖了它

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

background-position:bottom:

        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 */
        }