Q&A
スクリーンショットの提示は可能ですか？
cssのスタイルをリセットしたあと、以下のcssを記述しているのですが、
ブラウザの画面サイズによって罫線（1pxの隙間）が表示されます。
今まではimgタグに「vertical-align: bottom;」で解決していたのですが、
こんなことは初めてでです。
解決する方法はありますでしょうか。
listタグの隙間を埋めても解決しませんでした。
<ul> <li> <p><img src="img01.png"></p> <p><img src="img01.png"></p> <p><img src="img01.png"></p> </li> <li><img src="img01.png"></li> <li><img src="img01.png"></li> <li><img src="img01.png"></li> </ul>
ul { list-style: none; } img { vertical-align: bottom; }
■8/2 追記
わかりにくく申し訳ありません。
再現可能な状態を記載いたします。
▼再現可能なブラウザ名とバージョン
ブラウザ：GoogleChrome ←他ブラウザは未確認
バージョン:59.0.3071.115
▼状態が確認できる画面サイズ
480px、448px、416px、320px 他にもあると思います。
▼再現可能なコード
<!doctype html> <html> <head> <meta charset="utf-8"> <style type="text/css"> p, ul, li { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ul { list-style: none; } img { vertical-align: bottom; max-width: 100%; height: auto; } </style> </head> <body> <ul> <li> <p><img src="https://placehold.jp/640x100.png"></p> <p><img src="https://placehold.jp/640x100.png"></p> <p><img src="https://placehold.jp/640x100.png"></p> </li> <li><img src="https://placehold.jp/640x100.png"></li> <li><img src="https://placehold.jp/640x100.png"></li> <li><img src="https://placehold.jp/640x100.png"></li> </ul> </body> </html>
あと、現象が再現するブラウザとCSSリセットの情報も追記してください。
申し訳ありません。個人サイトではありませんので、スクリーンショットは難しいです。しかし、「margin:-1px 0;」という特種な方法で解決しました！ありがとうございました。
回答4件
0
ベストアンサー
ひょっとしたらグレーっぽい線でしょうか？
最近、デバイスによりけりですが、同様の現象が出たりする場合があり、悩んでいましたが、該当imgのcssにmargin:-1px 0;(上下どちらか、相殺がある場合はその分も含めて)を適用し解決しています。一度、試して見て下さい。
投稿2017/08/02 08:01
総合スコア3523
回答ありがとうございました。
この方法で解決いたしました！
グレーではありませんが、バックの背景色が見えている状態のようでした。
原因はわかりませんが、現状大丈夫そうです。
ありがとうございました！
解決したようですが、原因不明で対処療法にしかなっていないのでお勧めはしません。
もし、隙間が出来ない実装があった場合、ネガティブマージンによっておかしな描画になる事が考えられます。
現象を再現可能なコードを開示して切り分けしていくのが妥当だと私は思います。
そうですね、確かに「解決方法」では無いですね。スミマセン。現状、通常は隙間が空かないのですが、何故かデバイスにより1pxの隙間が表示されるのは実際にあり、私の知識では、色々試すしかありません。もちろん、ネガティブマージンでの影響が出ないように上下のブロック調整が必要な場合は行ないます。原因は何でしょうかね？
私の環境で再現出来ないので何ともいえません。
「再現可能なコード」「再現可能なブラウザ名とバージョン」が必要だと思います。
「画面サイズによって」も具体的でないので詳細な情報が必要です。
ご教示ありがとうございます。
利用しているブラウザやコードなど、後ほど追記したいと思います。
現状では、隙間ができる箇所にのみネガティブマージンで対応しております。
＞think49様
言われることはよく分かります。このネガティブマージンが「良い方法」とは、思っておりません。1つの対処療法です。私自身が初級-中級レベルなので、デバイス毎の情報を全て検討するのは出来ません。今後、多大な影響を与えると判明した場合には、分かる範囲で情報を公開し、ご相談させて頂きます。勝手言ってスミマセンが今後もご指摘等よろしくお願い致します。
＞yoshinaviさん
私もそのあたりは理解した上で、実装しております。
こういう方法があると知ることができたこと自体、ものすごく感謝しております。
本当にありがとうございます。
＞yoshinaviさん、think49さん
再現できるか自信がありませんでしたが、先ほど追記しましたコードで再現できました！
これを見る限り、今まで気づかなかっただけで、結構同じような状態があったのかもとびっくりしております。。。
0
CSS
1ul li,ul li p { 2 line-height:0; 3 font-size:0; 4}
画像の高さが小さくて、ブラウザデフォのline-heightの方が大きい場合起こるやつでは？
投稿2017/08/02 07:05
総合スコア1084
回答ありがとうございます。
こちらの方法試してみましたが、「line-height」が原因では無いようです。
「margin:-1px 0;」という特種な方法で解決しました！
わたくしも勉強になりました。
0
再現出来ず
ご掲示のコードを「Google Chrome 60.0.3112.78」で検証しましたが、再現できませんでした。
画面サイズ
▼状態が確認できる画面サイズ
480px、448px、416px、320px 他にもあると思います。
これはウインドウの幅(width)と受け取っていいのでしょうか。
Web Developerによって、ウインドウサイズを下記2つの解像度にリサイズして検証しました。
- 480x320 (width x height)
- 320x240 (width x height)
環境依存の可能性
環境依存の問題の可能性があります。
Google Chromeの拡張機能を全て無効化するか、プロファイルを作り直して検証したら改善されないでしょうか。
それでも改善が見られなければ、Chrome Developper Tools の [Styles] タブ、[Computed] タブを確認していく事になります。
現象的にはimg要素の border プロパティ、p要素の padding プロパティが怪しいですが…。
Re: jyoze さん
投稿2017/08/02 10:56
総合スコア18164
> バージョン:59.0.3071.115
Google Chromeのバージョンがやや古い為、アップデートしてみるといいかもしれません。
私は Google Chrome 60.0.3112.78 で再現しませんでした。
Windows 10 + Google Chrome 60.0.3112.78で質問者さまのコードそのままで再現しますよ。
この画像ですと、画像の幅が464や528などで画像の高さが82.5など、".5"ぴったりで算出される場合にその親要素の高さが83などと切り上げて算出されているようです。
think49さん
デモをご用意いただき有難うございます！
作成いただいた２つのデモ画面ですが、自宅のPCで確認したところ、２つとも隙間が出ております。。
アップデートで解決すればいいのですが、それだとクライアントが納得していただけないです。すみません。
guest1213さん
ご回答ありがとうございます。
小数点になる画像の高さがあるんですね。
ということは同じ不具合が出てる方も沢山いてそうですね。。。
そうなるとやはりyoshinaviさんのネガティブマージンの方法しかなさそうですね。
ありがとうございました！
win7+chrome 60.0.3112.90でも条件（デバイス画面の幅）により再現されますので、guest1213さんのご指摘通り、高さの切り上げが問題でしょうね。
皆様（jyozeさん、think49さん、guest1213さん）のお蔭で私も勉強になりました。ありがとうございました。
あなたの回答
tips
プレビュー
