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;
}