【CSS】safariで画像が縦に伸びてしまう件

2023.11.24

chromeや、デベロッパーツールではキレイに見えているのに、safariで見るとなぜか画像が縦に伸びていることがありました。
毎回ではないので、ブログに残しておきます。

下記の様な記述の際に起きるようです。

HTML
<div class="flexbox">
  <img src="image01.jpg" alt="">
  <img src="image02.jpg" alt="">
</div>

flexboxを設定している要素に「align-items: flex-start;」を設定するだけです。

CSS
.flexbox{
  display: flex;
  align-items: flex-start;
}

また、flexboxの子要素のimgにdivを追加すると良いそうです。

HTML
<div class="flexbox">
  <div><img src="image01.jpg" alt=""></div>
  <div><img src="image02.jpg" alt=""></div>
</div>

デベロッパーツールでは伸びてないので、一瞬戸惑いました。
ちょっとしたことなんですけどね～。

他にもあるよ。関連記事