Q&A
Chrome/Firefoxで再現しませんでした。再現環境（OS/ブラウザ/バージョン）を提示してください。
CSSで、どうしてもわからない点がありまして、ググっても解決策がみつからないので質問させていただきます。
タイトルどおりなのですが、CSSのborder(1px)がなぜか二本線になってしまうのです。
https://bootstrapmade.com/demo/eBusiness/
↑こちらのページは「eBusiness」というHTMLテンプレートのプレビューページです。
このテンプレートをつかってサイトを制作していますが、各見出し（h2）の下線がどうしても二本線になってしまうのです。（このプレビューページでもそうなってしまっています）
PCでみると二本線。でも、スマホだと1本になっています。
しかも、PCでも見るときによって一本線や二本線に変わっています。不思議です。。。
3pxの線にしたりすると、ふつうに一本線になります。
何が起こっているのでしょうか？
情報追加します。
・実際の箇所
.section-headline h2::after
のborderが割れます。
・動作環境
最新のChrome, Windows10
・スクリーンショット
・自分で制作したもののスクリーンショット
ご自身のコードをご提示されたほうが良いかと。
失礼しました。
最新のChromeです。
コードは、プレビューページとまったく同じです。
失礼しました。
最新のChromeです。
コードは、プレビューページとまったく同じです。
動く環境が違えば別のものです。
また提示URL確認しましたが、私のほうでも現象確認できませんでしたし、実際の画面キャプチャも合わせてご提示されたほうが良いかと思います。
ありがとうございます。画面キャプチャのほう追加いたしました。お手すきの際ご覧いただければと思います。
回答2件
0
ベストアンサー
Chromeで拡大した際に再現しました。（WinならCtrl+0で拡大状態から戻ります）
js
1.section-headline h2::after { 2 /*border: 1px solid #333;*/ 3 border-top: 2px solid #333; /* こうすれば二重になることは無い */ 4 bottom: -20px; 5 content: ""; 6 left: 0; 7 margin: 0 auto; 8 position: absolute; 9 right: 0; 10 width: 40%; 11}
投稿2019/01/16 02:46
総合スコア69398
ありがとうございました。頂いた方法で解決しました。
このPCの画面サイズの事情でデフォルトが拡大になっていたようです。Thinkpadは特殊なディスプレイサイズのため、設定されていたようです。
ありがとうございました。
あなたの回答
tips
プレビュー
