html - 在表格单元格的右下角添加下标

Question

我正在尝试将子脚本添加到 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 中，我可以覆盖它们但不能偏移它们。

Answer 1

尝试将您的元素定位在右下角，

要查看这项工作：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 */
}

Answer 2

html 中有一个子元素专门用于下标，尝试使用它并查看它的外观而不对其应用任何样式。

[用下面的替代解决方案编辑]

  .dayCell sub {
    position: absolute;
    margin-top: 13px;
    margin-left: 3px;
    font-size: 11px;
  }

示例 jsFiddle：http: //jsfiddle.net/functionfirst/hjyvJ/

此替代解决方案使用您的原始绝对位置但不设置顶部/左侧位置，而是使用边距来偏移下标文本。此方法从文档工作流程中取出，但不会设置其相对于元素的位置，因为您没有指定顶部/左侧位置。

Answer 3

放那个，我将最高值更改为 10 并且它可以工作。尝试，

.daySubscript {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 10;
    left: 0;  
      z-index: 10;
    text-align:right;
    vertical-align:bottom;
}