NO PICTUREBOOKS

Chromeで1pxのborderが太くなる(ぼやける?)ときの対処法

レスポンシブのdlリストで、スマホ表示ではdtとddを縦積みにしてddのみに1pxのborder-bottom、PC表示ではdtとddを横並びにしてdtとdd両方に1pxのborder-bottomを設定しました。

そして、デザイン上PC表示で最終行のdtとddのborderを消す必要があり、それぞれlast-of-typeでborder-bottomをnoneに設定したところ、消していない部分のborderの太さがChromeのみ倍くらいにぼやけていました。積む件数は3段なので奇数のせいかなと思い、一段増やしたりもしましたが変わらず。

結局解決法が見当たらず、border-bottom:noneを諦め、borderの太さを変えずにborderの色を消す(border-bottom-color:transparent;)でとりあえず設定しました。Chromeだけ…何故…。

 
dd {
	border-bottom: 1px solid #000;
}
dd:last-of-type {
	border-bottom-color: transparent;
}
@media (min-width:768px) {
	dl {
		display: flex;
		flex-wrap: wrap;
	}
	dt {
		border-bottom: 1px solid #000;
	}
	dt:last-of-type {
		border-bottom-color: transparent;
	}
}
 
2019.7.28