ベストアンサー

上下だけのボーダーなのに左に意図しないボーダー発生

2018/05/03 20:01

. hrタグの上下にボーダーを以下のようにして入れたのですが、親要素に沿って左側に<hr>の高さ分のボーダーができてしまいました。とりあえず border-left: none; で消したのですが、左に出た意図しないボーダーは何が原因なのでしょうか？ hr { height: 30px; border-top:2px solid gray; border-bottom:2px solid gray; } .

milano-com
お礼率100% (36/36)

CSS
回答数4
ありがとう数8

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

amanojaku1
ベストアンサー率54% (265/488)

2018/05/07 22:31 回答No.4

>回答No.3　amanojaku1 どうもhrタグを使っていることが原因のようです。下記のソースなら縦線は表示されません。 <html> <head> </head> <style type="text/css"></style> <body> <div class="double"></div> </body> </html>

質問者

お礼 2018/05/07 23:51

ありがとうございます。各ブラウザで検証までして頂きとても感謝しております。一種の仕様というかバグというか、hrを装飾する時はこのことを念頭に置いて少し気をつけることにします。代替案も提示して頂き本当にありがとうございます。

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

amanojaku1
ベストアンサー率54% (265/488)

2018/05/07 22:18 回答No.3

普通の二重線指定(下記コード)で「Chrome、Firefox、Internet Explorer」で同様に表示されるので、もう仕様と言って良いかと思います。 hr { border-top: 30px double #bbb; }

質問者

お礼 2018/05/08 03:07

こちらからも、ありがとうございます。

ログインすると、全ての回答が全文表示されます。

gahyu
ベストアンサー率50% (3/6)

2018/05/05 07:29 回答No.2

親要素をhrより大きくするとどうなるでしょうか height width どとらもです

質問者

お礼 2018/05/05 22:02

ありがとうございます。親要素をhrより縦横共に大きくしても同じ状況です。左には上下のborderと同じ太さの線が入り、右にはかなり細い(薄い?)線が入っております。ちなみに、hrは上下に存在するブロックの区切りとして入れており、上下のブロックとhrは同じ階層で、その外側に大きなブロックがあります。プロパティはかなり省略してしまいましたが、実際にはbeforeやpositionも使っております。ただ、これらを全て除外して質問にあるような単純な構造にしても状況は同じでした。キャッシュも一旦クリアにして試しましたのでキャッシュの影響もなさそうです。 hr { height:32px; border-top: 2px solid #B3B3B3; border-bottom: 2px solid #B3B3B3; border-left:none; border-right:none; position: relative; margin: 0 auto; } hr::before { position: absolute; content:''; width: 25px; height:25px; background-image: url(../img/faq.svg); background-repeat: no-repeat; top:50%; left: 50%; transform: translate(-50%, -50%); background-size: 25px 25px; } .

ログインすると、全ての回答が全文表示されます。