CSS白空间和列表风格图像不会在Firefox 11+中堆叠 [英] CSS white-space and list-style-image do not stack in Firefox 11+

问题描述

我有一个表，当我点击一个head列时，数据分别排序。当单击的列在列名称（即行样式图像）之前获得箭头。当列名太长，并且该列被点击进行排序，因此它具有图像项目符号，当设置 white-space：normal 时，图像位于文本上方。这是我的期望。这是在Chrome和IE中发生的，但在Firefox v11 +中不是这样。在Firefox中，图像箭头超出了文本前面的< th> 的界限。任何建议，使这项工作在Firefox如Chrome和IE浏览器？

I have a table, and when I click on one of the head columns the data gets sorted respectively. When clicked column gets an arrow before the column name (which is the line-style-image). When the column name is too long, and the column is clicked for sorting so it has image bullet, the images goes above the text, when the white-space: normal is set. This is what I expect. This is what happens in Chrome and IE, but is not the case in Firefox v11+. In Firefox the image arrow goes beyond the bounds of the <th> in front of the text. Any suggestion to make this work in Firefox like in Chrome and 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 b
$ b

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

推荐答案

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

Are you using any reset.css ?? If not .

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

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

If problem still persists, please provide a jsFiddle

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

:: Reason for using reset.css is because it will make all user-agent(browser) css to a base settings, so that they don't look different in different browsers.

这篇关于CSS白空间和列表风格图像不会在Firefox 11+中堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！