775980 - <hr> defaults to border-box sizing

Status: NEW

Description

[David Ruscitti]

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 {
  height:1px;
  border:none;
  border-bottom:1px solid #f8f8f9;
  background:#a9aaab;
  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

[Loic]

Created attachment 644473 [details]
Testcase (with workaround)

Maybe a dupe, I don't know.

Comment 2

[Boris Zbarsky [:bzbarsky, bz on IRC]]

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

[David Ruscitti]

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.

Comment 4

[Boris Zbarsky [:bzbarsky, bz on IRC]]

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.  ;)

Comment 5

[Boris Zbarsky [:bzbarsky, bz on IRC]]

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

[David Ruscitti]

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?

Thanks!

Comment 7

[Boris Zbarsky [:bzbarsky, bz on IRC]]

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

Comment 8

[j.j.]

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.

Comment 9

[j.j.]

Created attachment 644621 [details]
testcase 2

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