sim*_*mon 4 html css alignment css-float internet-explorer-7
Float:right为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 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>
</td>
<td colspan="4">
<div>
2008
</div>
</td>
</tr>
<tr>
<td>
</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对于几个元素重复类声明的意义上并不是最优的,但如果与问题无关,请不要对此进行评论.)
它应该按照你的方式工作(或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的解决方案是要么不定义宽度,要么使其宽度足以容纳标题.