vertical-align
を適用したいのは<td>
にであってその中のテキストでは無いので、vertical-align:top
を<tr>
に設定し、スタイルの継承を止めるために<td>
にvertical-align:baseline
を設定すれば期待通りになると思います。
table {
font-family: "Century Gothic", Arial, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}
tr {
vertical-align: top;
}
td {
float: none;
vertical-align: baseline;
height: 246px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
text-align: left;
font-size: 16px;
position: relative;
}
td::first-letter {
font-size: 24px;
font-weight: bold;
}
p::first-letter {
font-size: 24px;
font-weight: bold;
}
p,
#with::first-letter {
vertical-align: top;
}
<table style="background-color:yellow; padding:2px;">
<tr>
<td style="background-color:red;">
魚とはウエブデザインにおいてただ空いている空間を本文で満たすための内容だ。ただし本文の有意義さにはこだわりがない。
</td>
<td style="background-color:blue;">
魚とはウエブデザインにおいてただ空いている空間を本文で満たすための内容だ。ただし本文の有意義さにはこだわりがない。
</td>
</tr>
</table>
<p>
魚とはウエブデザインにおいてただ空いている空間を本文で満たすための内容だ。ただし本文の有意義さにはこだわりがない。
</p>
<p id="with">
魚とはウエブデザインにおいてただ空いている空間を本文で満たすための内容だ。ただし本文の有意義さにはこだわりがない。
</p>
ちなみに仕様的にはSafariの挙動が正しいのだと思います。::first-letter
にはvertical-align
がfloat:none
である場合に限って適応できるとあり、Safariではfloat:none
ではご質問の様に適応され、float:left
などにすると無視されるのが確認できます。
These are the properties that apply to :first-letter pseudo-elements: font properties, 'text-decoration', 'text-transform', 'letter-spacing', 'word-spacing' (when appropriate), 'line-height', 'float', 'vertical-align' (only if 'float' is 'none'), margin properties, padding properties, border properties, color property, background properties.
追記
と思ったのですが引用した部分は::first-letter
に直接指定可能なプロパティについてで、Firefoxでvertical-align: top;
を::first-letter
に適応したらSafariの<td>
内と同じになったので、やはりSafariがおかしいっぽいです。感じとしてはvertical-align: top;
が::first-letter
にまで継承した様な挙動になってますが(なのに::first-letter
にvertical-align: baseline;
を指定しても直ら無いのでその説明もちょって合わない気が…)、継承に関する仕様にvertical-align
は継承されないとあるので結局Safariがおかしい様です。
table
) に入っています。ですから、vertical-align
の設定は大丈夫でしょうか。