我正在尝试将子脚本添加到 html 表格单元格中,使其看起来像这样:
(单元格居中的5和右下角的99)
这是一些示例 html:
<table class="yearTable">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td class="dayCell">5
<div class="daySubscript">99</div>
</td>
</tr>
</table>
以及我正在使用的 CSS:
.yearTable td{
border:1px solid #CCCCCC;
width:45px;
height:45px;
text-align:center;
vertical-align:middle;
}
.dayCell
{
color:Black;
background-color:Aqua;
position: relative;
}
.daySubscript {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
text-align:right;
vertical-align:bottom;
}
问题是下标在IE8中显示在右上角,在firefox中根本不显示
IE 中的示例输出:
我尝试将单元格中的测试移动到一个单独的 div 中,我可以覆盖它们但不能偏移它们。
最佳答案
尝试将您的元素定位在右下角,
要查看此作品:http://jsfiddle.net/bfSVk/
.daySubscript {
/* width: 100%; */
/* height: 100%; */
position: absolute;
bottom:0; /* top: 0; */
right:0; /* left: 0; */
z-index: 10;
text-align:right;
vertical-align:bottom;
}
.yearTable td{
border:1px solid #CCCCCC;
width:45px;
height:45px;
text-align:center;
vertical-align:middle;
position:relative; /* establish relationship with children position absolute */
}
.yearTable {
position:relative;
/* establish relationship with children-children position absolute */
}
关于html - 在表格单元格的右下角添加下标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14962178/