CSS空白和列表样式图像不会在Firefox堆栈11+(CSS white-space and li

我有一个表，当我点击列头分别得到的数据进行排序的一个。 当点击列获得一个箭头列名前（这是行式图像）。 当列名太长，且被点击排序所以它有像子弹列，图像变为文本，当上述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>

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？ 如果不 。

在这里，你可以找到的reset.css许多环节 。

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

编辑:::之所以使用reset.css是因为它将使所有的用户代理（浏览器）的CSS的基础设置，让他们不看在不同的浏览器不同。

文章来源: CSS white-space and list-style-image do not stack in Firefox 11+