15
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Safariでinline-blockの幅が足りず改行されるバグ?

Last updated at Posted at 2017-02-15

Safari、iOSのSafariでのみ、inline-blockで幅が足りずに文字が一文字ほど改行されてしまうことがある。

画面キャプチャ

#原因
結論からいうと font-feature-settings: "palt" を指定してあると起こる

参考:iPhone6 で inline-block が勝手に改行されちゃう場合のチェックポイント

#解決

  • 諦めて font-feature-settings: "pkna" と指定する
  • 諦めて widthを指定する

参考サイトによると

iPhoneはクソ。もしくはsafari はクソ。
font-feature-settings:"palt"; はクソ。

とのことです。

##補足
要素に width: max-content を指定すると直るという事例もあるようだが、上記の場合改善しなかった
参考:display: inline-blockで最後の文字だけ落ちてしまう問題

max-content で改善しなかった場合の参考まで。

15
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?