如何在IE 7的表单元格中使用div ?

Float:right specified for a div inside a table cell seems to have no effect in IE. I have also tried text-align right, among other things, to align the layer contents to the right, but without success in IE 7.

Float:在表单元格中为div指定的右对齐在IE中没有作用。我也尝试过文本对齐方式，其中之一就是将图层内容对齐到右边，但是在IE 7中没有成功。

CSS snippet:

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 snippet:

HTML代码片段:

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

Both the HTML and the CSS validate, and in Firefox the text aligns right, as it should. If you want to test the complete code by copy/pasting it, it's here:

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>

(I know that the CSS is are not optimal in the sense that the class declarations are repeated for several elements, but please don't comment on this, if it is not relevant to the problem.)

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

3 个解决方案

#1

It should work the way you have it (or the way alexmeia suggests).

它应该按照你的方式运行(或者按照亚历山的建议)。

But, (this being IE), the headers Q1, Q2, etc. are pushing the table columns wider than the 14 px you've requested.

但是，(这是IE)， header Q1, Q2，等等正在把表列推得比你要求的14像素宽。

The columns are right justified within the 14px you've defined, but the divs are not moving to the right in IE. (The div is staying within the 14px defined for it even though the column is actually wider than 14px)

列在您定义的14px中是正确的，但是div在IE中没有向右移动。(div在为它定义的14px范围内，即使列实际上大于14px)

To illustrate this, you can either make the width say 28px or change the color of one of the backgrounds to demonstrate the difference between the td and the div within in.

为了说明这一点，您可以使宽度为28px，或者改变其中一个背景的颜色，以显示td和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;
}

The solution for IE is to either not define a width or to make it wide enough to accomodate the header.

IE的解决方案是不定义宽度或使其宽度足够容纳标题。

#2

You don't need to declare rules for the div.workload. Use only this rules and everything will work fine:

您不需要为div.workload声明规则。只用这条规则，一切都会好起来的:

 td {
    border: 1px solid black;
     }

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

#3

It's worth noting, that IE, especially v6 on pre SP1 XP, and older windows has serious rendering issues when you intermingle tables within divs, and divs within those tables. Once you exceed a certain complexity & nesting you may get a blank/white page.

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

If your needing to right-align text content in certain cells, I would suggest adding an additional class declaration to the td tag, not nesting a div. I would also suggest trying in IE8, and see if the issue persists. You didn't mention which versions you need to support.

如果您需要在某些单元格中对文本内容进行右对齐，我建议在td标签中添加一个额外的类声明，而不是嵌套一个div。您没有提到需要支持哪些版本。

#1