- ベストアンサー
上下だけのボーダーなのに左に意図しないボーダー発生
. 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）
- 専門家の回答
質問者が選んだベストアンサー
>回答No.3 amanojaku1 どうもhrタグを使っていることが原因のようです。 下記のソースなら縦線は表示されません。 <html> <head> </head> <style type="text/css"><!-- .double{ height: 30px; border-top:2px solid gray; border-bottom:2px solid gray;} --></style> <body> <div class="double"></div> </body> </html>
その他の回答 (3)
- amanojaku1
- ベストアンサー率54% (265/488)
普通の二重線指定(下記コード)で「Chrome、Firefox、Internet Explorer」で同様に表示されるので、もう仕様と言って良いかと思います。 hr { border-top: 30px double #bbb; }
お礼
こちらからも、ありがとうございます。
- gahyu
- ベストアンサー率50% (3/6)
親要素をhrより大きくするとどうなるでしょうか height width どとらもです
お礼
ありがとうございます。 親要素を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; } .
- h_ishikawa
- ベストアンサー率44% (368/821)
width設定がされていないためです。
お礼
ありがとうございます。なるほどと思いさっそく、width:500px; や width;100%; などで試してみましたがどういうわけか変化しませんでした。よくみたら右側もおかしくなっているようですので、こちらも none で緊急避難的に対処しましたが、原因がつかめません。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
ありがとうございます。 各ブラウザで検証までして頂きとても感謝しております。 一種の仕様というかバグというか、hrを装飾する時はこのことを念頭に置いて少し気をつけることにします。 代替案も提示して頂き本当にありがとうございます。