4

Float:right为表格单元格内的 a指定div似乎在 IE 中无效。我还尝试了 text-align right 以将图层内容向右对齐，但在 IE 7 中没有成功。

CSS 片段：

.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}

div.workload {
    background-color: #E6D7E9;
    text-align: right;
    width: 14px;
    float: right;
}

HTML 片段：

<td class="workloadcell">
    <div class="workload">
        1
    </div>
</td>

HTML 和 CSS 都有效，并且在 Firefox 中，文本正确对齐，正如它应该的那样。如果你想通过复制/粘贴来测试完整的代码，它在这里：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
        <title>Table Test</title>
        <style type="text/css">
td {
    border: 1px solid black;
}


.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}



div.workload {
    background-color: #E6D7E9;
    text-align: right;
    width: 14px;
    float: right;
}
</style>
    </head>



<body>
        <table>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td colspan="4">
                    <div>
                        2008
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    <div>
                        Q1
                    </div>
                </td>
                <td>
                    <div>
                        Q2
                    </div>
                </td>
                <td>
                    <div>
                        Q3
                    </div>
                </td>
                <td>
                    <div>
                        Q4
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    workload forecast
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        1
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    actual workload
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        3
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        3
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        3
                    </div>
                </td>
                        </tr>
        </table>
    </body>
</html>

（我知道 CSS 不是最优的，因为类声明对多个元素重复，但如果与问题无关，请不要对此发表评论。）

4

3 回答 3

5

它应该按照您的方式工作（或 alexmeia 建议的方式）。

但是，（这是 IE），标题Q1、Q2 等正在推动表格列比您请求的 14 px 更宽。

这些列在您定义的 14px 内右对齐，但 div 在 IE 中没有向右移动。（即使列实际上比 14px 宽，div 也保持在为它定义的 14px 内）

为了说明这一点，您可以将宽度设为 28px或更改其中一个背景的颜色，以展示 td 和 in 中的 div 之间的差异。

.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}

div.workload {
    background-color: #E6EEE9;
    text-align: right;
    width: 14px;
    float: right;
}

IE 的解决方案是要么不定义宽度，要么使其宽度足以容纳标题。

于 2009-03-23T16:33:35.820 回答
3

您不需要为 div.workload 声明规则。仅使用此规则，一切都会正常工作：

 td {
    border: 1px solid black;
     }

 .workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 20px;
    height: 16px;
    text-align: right;
    }
于 2009-03-23T16:05:23.127 回答
1

值得注意的是，当您在 div 中混合表格以及在这些表格中混合 div 时，IE，尤其是 pre SP1 XP 上的 v6 和旧 Windows 会出现严重的渲染问题。一旦超过一定的复杂性和嵌套，您可能会得到一个空白/白页。

如果您需要在某些单元格中右对齐文本内容，我建议在 td 标记中添加一个额外的类声明，而不是嵌套 div。我还建议在 IE8 中尝试，看看问题是否仍然存在。你没有提到你需要支持哪些版本。

于 2009-03-23T17:00:17.050 回答