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

我正在尝试向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>

问题是，在IE8中，下标显示在右上角，而在firefox中根本不显示

IE中的示例输出：

---

我尝试将单元格中的测试移到一个单独的div中，我可以覆盖它们，但不能偏移它们。

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

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

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

示例JSFIDLE：

---

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

尝试将元素定位在右下角

要查看此工作，请执行以下操作：

---

换句话说，我把最大值改为10，它就行了。试试看

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

---

我手头没有解决方案，但是像这样的相对和绝对位置在表格单元格中不起作用，对不起！这是表格渲染的一个怪癖。基本上，您不能将相对放置在TD上并尝试绝对定位子元素。TD节点不支持相对定位。您需要在td中添加一个100%宽度和高度的包装div元素。您有

left:0

和

top:0，当它应该是
正确时：0；底部：0如果你想让99在底部，为什么要将顶部设置为零？将底部设置为零。为什么还要使用表？+1来自我-感谢我尝试过的指针。这不是一个完美的解决方案，因为它将
5
移动到左侧，而
99
不在角落。如果我没有其他选择，那么我可能会被迫使用此选项。问题是我的
td
的大小可能会改变，因此我希望有一种方法将其放置在角落中，而不管大小如何-这几乎是可行的。问题在于firefox将
99
放在浏览器屏幕的右下角，而不是
td
IE8和Chrome正常工作。尝试修复与父td的关系，使其位置：相对。请参阅编辑后的答案。感谢您的更新，但这似乎没有任何区别。FF仍然将99放在jsFiddle中对FF有效的screenstrangle的一角，但当我在FF上的网页中使用完全相同的代码时就不会了，因为文本稍微在表单元格之外。我会将此标记为答案。一定有什么东西覆盖了您的样式。这没有达到预期效果99超出了表格单元格的范围
.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 */
}

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