Question

我有一个表，当我点击其中一个头列时，数据将分别进行排序。当单击列在列名称之前获得一个箭头（这是行样式图像）。如果列名太长，并且单击列进行排序以使其具有图像项目符号，则在设置white-space: normal时图像将位于文本上方。这就是我的期望。这是Chrome和IE中发生的情况，但在Firefox v11 +中并非如此。在Firefox中，图像箭头超出了文本前面<th>的范围。是否有任何建议可以在Chrome和IE中使用Firefox？

以下是一个示例：
的 HTML

<table class="tableCustom" cellspacing="0" cellpadding="0" border="0">
    <thead>
        <tr>
            <th class="tableValue sorting_asc">
                <ul>
                    <li>Some unnecesseary long Column Name</li>
                </ul>
            </th>
        </tr>
    </thead>
</table>

CSS

th.tableValue {
    background-color: #8DA7BE;
}

th, th.tableValue {
    background-position: center top;
    background-repeat: repeat-x;
    border: 1px solid #8DA7BD;
    color: #FFFFFF;
    font-size: 9pt;
    height: 33px;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    white-space: normal;
}

.tableValue {
    color: #728DAB;
    text-align: center;
    white-space: normal;
    width: 100px;
}

.sorting_asc {
    list-style-image: url("../img/sort-asc.gif");
    list-style-position: inside;
    list-style-type: inherit;
}

Answer 1

你在使用任何reset.css吗？如果不。

Here you can find many links for the reset.css

如果问题仍然存在，请提供jsFiddle

编辑::: 使用reset.css的原因是因为它会将所有用户代理（浏览器）css设置为基本设置，以便它们在不同的浏览器中看起来不同。

Firefox白色空间和列表样式图像不会在Firefox 11+中堆叠

1 个答案: