Closed Bug 1163906 Opened 10 years ago Closed 4 years ago

change the default style of <hr> to box-sizing: content-box

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1377188

People

(Reporter: myakura, Unassigned)

Details

It seems only Gecko has `box-sizing: border-box` on the `<hr>` [1]; The HTML spec does not suggest it have border-box and leaves it as initial (i.e. content-box) [2]. It'll be great if Gecko to match other engines. [1] https://github.com/necolas/normalize.css/blob/master/normalize.css#L208-L215 [2] https://html.spec.whatwg.org/multipage/rendering.html#the-hr-element-2
Component: General → CSS Parsing and Computation
> It seems only Gecko has `box-sizing: border-box` on the `<hr>` [1] Really? data:text/html,<hr style="border: 50px solid; width: 100px"> is showing a 100px wide box for me in Chrome, not a 200px wide box. So is data:text/html,<!DOCTYPE html><hr style="border: 50px solid; width: 100px;"> and getComputedStyle(document.querySelector("hr")).boxSizing in either document above returns "border-box" in Chrome. So I have no idea what that normalize.css is about, but if that's all the evidence you're using for only Gecko having border-box sizing on <hr>... then you need better evidence. ;) Fwiw, I just tested IE 11 too, and that does have content-box sizing on <hr>. I haven't tested older IE browsers, but maybe that's actually web compatible. Hard to tell without checking the various IE modes.
(In reply to Not doing reviews right now from comment #1) > > It seems only Gecko has `box-sizing: border-box` on the `<hr>` [1] > > Really? > > data:text/html,<hr style="border: 50px solid; width: 100px"> > > is showing a 100px wide box for me in Chrome, not a 200px wide box. So is > > data:text/html,<!DOCTYPE html><hr style="border: 50px solid; width: > 100px;"> > > and getComputedStyle(document.querySelector("hr")).boxSizing in either > document above returns "border-box" in Chrome. Ah, that's because they landed patch to change to match Gecko. http://src.chromium.org/viewvc/blink?view=revision&revision=193586 Not sure what their intent is...

This seams to be fixed

view-source:resource://gre-resources/html.css

hr {
  display: block;
  border: 1px inset;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  margin-inline-start: auto;
  margin-inline-end: auto;
  color: gray;
  -moz-float-edge: margin-box;
  box-sizing: content-box; /*  <= here  */
}
Status: UNCONFIRMED → RESOLVED
Closed: 4 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.