29007


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

[![画像の説明をここに入力](https://i.stack.imgur.com/yJ4LL.png)](https://i.stack.imgur.com/yJ4LL.png)

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

[こちら](https://jsfiddle.net/nf4sfb02/)の例を`Safari`ブラウザーで開いてください。

[code]

    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;
    }
[/code]

[code]

    <table>
    <tr>
      <td>
        魚とはウエブデザインにおいてただ空いている空間を本文で満たすための内容だ。ただし本文の有意義さにはこだわりがない。
      </td>
    </tr>
    
    </table>
[/code]


CC BY-SA 3.0
2016-09-20T03:57:16.380
28994
2016-09-23T08:34:10.913
2016-09-23T08:34:10.913
3054
16876
question
html css
::first-letterで文字サイズを大きくすると、Safariでは後続の文字の位置が上にそろってしまう


`vertical-align`を適用したいのは`<td>`にであってその中のテキストでは無いので、`vertical-
align:top`を`<tr>`に設定し、スタイルの継承を止めるために`<td>`に`vertical-
align:baseline`を設定すれば期待通りになると思います。

[code]

    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;
    }
[/code]

[code]

    <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>
[/code]

ちなみに[仕様](https://www.w3.org/TR/CSS2/selector.html#first-
letter)的には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;`を指定しても直ら無いのでその説明もちょって合わない気が…）、[継承に関する仕様](https://www.w3.org/TR/CSS21/propidx.html)に`vertical-
align`は継承されないとあるので結局Safariがおかしい様です。


CC BY-SA 3.0
2016-09-20T15:23:13.590
29007
2016-09-20T16:57:59.057
2016-09-20T16:57:59.057
3974
3974
28994
answer