1

我有一个表格，当我单击其中一个标题列时，数据会分别排序。单击列时，列名称前会出现一个箭头（即线条样式图像）。当列名太长，并且单击列进行排序以使其具有图像项目符号时，图像在white-space: normal设置时位于文本上方。这是我所期望的。这在 Chrome 和 IE 中会发生，但在 Firefox v11+ 中并非如此。在 Firefox 中，图像箭头超出了<th>文本前面的边界。有什么建议可以在 Firefox 中像 Chrome 和 IE 一样工作吗？

这是一个示例：
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>

​<br> 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;
}

​</p>

4

1 回答 1

2

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

在这里您可以找到 reset.css 的许多链接。

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

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

于 2012-06-12T11:51:39.607 回答