<hr> defaults to border-box sizing




6 years ago
6 years ago


(Reporter: druscitti, Unassigned)




Firefox Tracking Flags

(Not tracked)


(Whiteboard: qawanted)


(2 attachments)



6 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

Steps to reproduce:

css definition:

hr {
  border-bottom:1px solid #f8f8f9;
  margin:10px 0;

Actual results:

Browser rendered as 1px total height instead of 2px.

Expected results:

Should have rendered as 1px height + 1px border-bottom instead of just 1px border-bottom. To fix the issue I added -moz-box-sizing:content-box which fixed the problem. Seems that it's defaulting to border-box. Haven't noticed this issue on anything other than the hr tag.

Comment 1

6 years ago
Created attachment 644473 [details]
Testcase (with workaround)

Maybe a dupe, I don't know.


6 years ago
Component: Untriaged → Layout
Keywords: testcase
Product: Firefox → Core
Yes, it's defaulting to border-box, on purpose.  Web pages actually depend on that behavior, or did when I last touched it.

Comment 3

6 years ago
Not sure I understand that comment. The standard box model is height+padding+border+margin=total height (same for width of course). That's how it's been since I've been in web. It's nice to have options, but it should default to web standards.

Also, this must have been done in a recent update. I use firefox for all of my web testing and have never had to use the -moz-box-sizing property.
I know what the standard box model is, yes.  But it turns out that web pages depend on <hr> specifically having border-box sizing in the horizontal direction.  Or at least have in the past.

So <hr> has had "-moz-box-sizing:border-box" in the UA stylesheet in all modes since bug 38370 was fixed back in September 2003.  Not sure whether that counts as a recent update.  ;)
Summary: Default box model on hr tag → <hr> defaults to border-box sizing
And note that the use of border-box sizing on <hr> in _quirks_ mode goes back much earlier.  In fact, it dates back to bug 18754 (September 2000 or so).

Comment 6

6 years ago
haha. I stand corrected. I guess I don't use hr that often.

Anyway, it is different in other browsers (webkit, opera, ie). Not sure why border-box is needed for the horizontal in firefox.

Just wanted to post that as it's an inconsistency with other major browsers. Not that big of a deal, but maybe something to revisit in the future if it's been since '03?

Need to see what other UAs do with floats near <hr>....
Whiteboard: qawanted

Comment 8

6 years ago
AFICT this is one of more old <hr> compatibility issue I worked around from time to time but never managed to file a bug about.
Ever confirmed: true

Comment 9

6 years ago
Created attachment 644621 [details]
testcase 2

WebKit, Opera, IE show a yellow bar with red border here, Mozilla shows a red bar.


6 years ago
OS: Mac OS X → All
Hardware: x86 → All
Version: 14 Branch → Trunk
You need to log in before you can comment on or make changes to this bug.