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;
}
}