[CSS] ウェブページの印刷時に一番上の画像と文字が重なった【display:inlineとblock】

教室ブログを印刷をしてみると、なぜか印刷が重なってしまうページがありました。

すべてのページではなく、特定の記事だけで起こりました。

・保護者の「承認」がないとアプリをインストールできないようにするには？【Google ファミリーリンク】 – スマホ教室ちいラボ

プリンタの問題ではなかった

はじめは、プリンタが用紙の読み込みに失敗して、二重に印刷してしまったのか、と思ったのですが、よく見ると違います。印刷プレビューでも文字が重なっているのです。

ページ切替えの一番上に画像があったときに、直後の文章の位置が上がっていて、結果として重なっているようです。

PCのChromeブラウザの「検証」で、レンダリングのメディアタイプを「印刷」にします。

画面で見る分には、文字は重なっていません。

画像に関するCSSのオン・オフを変更してみると、いろんな条件で、重なりが解消しました。

どちらか一方の設定だけでも重ならなくなりました。

ここで、気になったのが、displayです。

というのも、「継承」したCSSが適用されていないからです。

@media print .wp-block-image, .size-large {
    display: inline !IMPORTANT;
}

上書きしているCSSを見てみると、

.wp-block-image img {
    display: block;
}

です。

そこで、style.cssに

@media print {
.wp-block-image img {
    display: inline !IMPORTANT;
}
}

を追加してみます。

無事に重ならずに印刷できました。