3

::first-letterを使ったとき、下図のようにChromeに1行目と2行目の間に空間が普通より大きくなって、Safariには1行目の文字が上がりました:

画像の説明をここに入力

line-heightの設定は変えませんでした。

こちらの例をSafariブラウザーで開いてください。

table{
    font-family:"Century Gothic", Arial, "Hiragino Kaku Gothic Pro",  Meiryo, sans-serif; 
	
}

tr{}

td{
	height:246px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	text-align: left;
	vertical-align: top;
	font-size: 16px;
	position: relative;
}

td::first-letter{
  font-size: 24px;
  font-weight: bold;
}
<table>
<tr>
  <td>
    魚とはウエブデザインにおいてただ空いている空間を本文で満たすための内容だ。ただし本文の有意義さにはこだわりがない。
  </td>
</tr>

</table>

4
  • HTMLソースはどのようになっていますか。vertical-alignを指定しているのはなぜでしょうか。
    – int32_t
    2016年9月20日 4:28
  • 私のHTMLに上記の本文は表 (table) に入っています。ですから、vertical-alignの設定は大丈夫でしょうか。
    – 徳川武
    2016年9月20日 5:14
  • HTMLソースを見せて差し障りがないのであれば質問本文に記載した方が回答しやすいかと……
    – user10259
    2016年9月20日 6:28
  • すみませんでした。こちらをSafariで開いて、ご覧ください。
    – 徳川武
    2016年9月20日 6:52

1 件の回答 1

3

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-alignfloat: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-lettervertical-align: baseline;を指定しても直ら無いのでその説明もちょって合わない気が…)、継承に関する仕様vertical-alignは継承されないとあるので結局Safariがおかしい様です。

1
  • お時間、誠にありがとうございます!非常に助けてくださいました^^
    – 徳川武
    2016年9月21日 2:53

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。