こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

hr {
height: 30px;
border-top:2px solid gray;
border-bottom:2px solid gray;
}

.

投稿日時 - 2018-05-03 20:01:45

QNo.9494842

困ってます

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

>回答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>

投稿日時 - 2018-05-07 22:31:22

お礼

ありがとうございます。
各ブラウザで検証までして頂きとても感謝しております。

一種の仕様というかバグというか、hrを装飾する時はこのことを念頭に置いて少し気をつけることにします。

代替案も提示して頂き本当にありがとうございます。

投稿日時 - 2018-05-07 23:51:35

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.3

普通の二重線指定(下記コード)で「Chrome、Firefox、Internet Explorer」で同様に表示されるので、もう仕様と言って良いかと思います。

hr {
border-top: 30px double #bbb;
}

投稿日時 - 2018-05-07 22:18:37

お礼

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

投稿日時 - 2018-05-08 03:07:26

ANo.2

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

投稿日時 - 2018-05-05 07:29:16

お礼

ありがとうございます。

親要素を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;
}


.

投稿日時 - 2018-05-05 22:02:06

ANo.1

width設定がされていないためです。

投稿日時 - 2018-05-04 16:54:50

お礼

ありがとうございます。なるほどと思いさっそく、width:500px; や width;100%; などで試してみましたがどういうわけか変化しませんでした。よくみたら右側もおかしくなっているようですので、こちらも none で緊急避難的に対処しましたが、原因がつかめません。

投稿日時 - 2018-05-04 18:18:53

あなたにオススメの質問