html – 如何在IE 7的表格单元格内的div中进行右对齐？_html-js-css

概述Float：为表格单元格内的div指定的权限似乎对IE没有影响.除了其他方面,我还尝试了text-align,将图层内容对齐,但在IE 7中没有成功. CSS片段： .workloadcell { background-color: #E6D7E9; padding: 0px; width: 14px; height: 16px; text-align: r float：为表格单元格内的div指定的权限似乎对IE没有影响.除了其他方面,我还尝试了text-align,将图层内容对齐,但在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 >    <div >        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 >                    <div >                        1                    </div>                </td>                <td >                    <div >                        2                    </div>                </td>                <td >                    <div >                        2                    </div>                </td>                <td >                    <div >                        2                    </div>                </td>            </tr>            <tr>                <td>                    actual workload                </td>                <td >                    <div >                        3                    </div>                </td>                <td >                    <div >                        3                    </div>                </td>                <td >                    <div >                        2                    </div>                </td>                <td >                    <div >                        3                    </div>                </td>                        </tr>        </table>    </body></HTML>

(我知道CSS对于几个元素重复类声明的意义上并不是最优的,但如果与问题无关,请不要对此进行评论.)

解决方法它应该按照你的方式工作(或alexmeia建议的方式).

但是,(这是IE),标题Q1,Q2等正在推动表格列宽度超过您要求的14 px.

这些列在您定义的14px内右对齐,但div在IE中没有向右移动. (div保持在为其定义的14px内,即使该列实际上大于14px)

为了说明这一点,您可以将宽度设为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;}

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

总结

以上是内存溢出为你收集整理的html – 如何在IE 7的表格单元格内的div中进行右对齐？全部内容，希望文章能够帮你解决html – 如何在IE 7的表格单元格内的div中进行右对齐？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1083493.html