H5 の写真のギャップを解決する方法

今回は、H5の写真のズレを解決する方法と、H5の写真のズレを解決するための注意点

を紹介します。以下は実際のケースですので、見てみましょう。

最近、h5 プロジェクトに取り組んでいたところ、いくつかの img タグの間に約 3px の隙間がありました

その後、Baidu で確認したところ、原因はブラウザの要素が処理されているためであることがおおよそわかりました。単語として、ギャップはいくつかの文字のために予約されており、それらを整列させた後でも少し大きくなります (j、g など)。個人的なテストに適した解決策もいくつか見つけました。

1. body の font-size
を 0 に設定します。これを行うときは、以下の div を記述するときに要素のフォント サイズを指定することを忘れないでください。

2.

<img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_07.jpg"  class="lazy"   alt="H5 の写真のギャップを解決する方法" >
  <img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_11.png"  class="lazy"    alt="H5 の写真のギャップを解決する方法" >
  <img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_08.jpg"  class="lazy"   alt="H5 の写真のギャップを解決する方法" >

を

<img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_07.jpg"  class="lazy"   alt="H5 の写真のギャップを解決する方法" ><img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_11.png"  class="lazy"   alt="H5 の写真のギャップを解決する方法" ><img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_08.jpg"  class="lazy"   alt="H5 の写真のギャップを解決する方法" >

と書きます。つまり、img タグを同じ行にスペースを入れずに書きます。

これらの事例を読んだ後は、この方法を習得したと思います。 php 中国語ウェブサイト その他の関連記事にご注意ください。

関連記事:

H5 でビデオタグとオーディオタグとプログレスバーを使用する方法

H5 と C3 の新しいインタラクティブ機能とは何ですか

H5 のブロックレベルタグの概要

以上がH5 の写真のギャップを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。