Skip to content

Correct hr box-sizing in latest Firefox #133

Closed
wants to merge 1 commit into from

3 participants

@saschadube

The box-sizing of the HR element is set to border-box in latest Firefox (15) while it is set to content-box in Chrome (22), Opera (12), Safari (5.1), IE9 and IE8.

You can easily test it with the HTML5 Boilerplate code:

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

Just add border-bottom: 1px solid #ccc; and you will see that there is an empty line between the borders in all browsers except Firefox.

I would also propose to set the height of the HR element in Boilerplate to 0 so it is possible to style it with two borders. If the height must remain 1px in Boilerplate it would be an alternative to set the box-sizing to border-box for all browsers in normalize.css

@saschadube saschadube Correct hr box-sizing in latest Firefox
The box-sizing of the HR element is set to border-box in latest Firefox (15) while it is set to content-box in Chrome (22), Opera (12), Safari (5.1), IE9 and IE8.

You can easily test it with the HTML5 Boilerplate code:

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

Just add border-bottom: 1px solid #ccc; and you will see that there is an empty line between the borders in all browsers except Firefox.

I would also propose to set the height of the HR element in Boilerplate to 0 so it is possible to style it with two borders. If the height must remain 1px in Boilerplate it would be an alternative to set the box-sizing to border-box for all browsers in normalize.css
030f122
@necolas
Owner
necolas commented Jan 19, 2013

Did you mean to open this against the HTML5 Boilerplate code base?

@drublic
drublic commented Jan 20, 2013

I think the first issue is correctly filed in this repo.
Here is a test case. I am +1 on normalizing the behavior for horizontal lines in Firefox and thus including this patch. It could be worthy to add the non-prefixed version of box-sizing too, since the -moz--prefix will hopefully removed by Mozilla soon.

Setting hr's height to 0 is another discussion. I am not sure about the behavior of oldIE when setting this. Also the spec doesn't clearly state what the initial value of the hr-element ist. Could be worth discussing and testing in the HTML5BP repo.

@necolas necolas added a commit that closed this pull request Jan 20, 2013
@necolas Normalize `hr`
Firefox uses different `box-sizing` and `height` values to all other
browsers. Firefox doesn't currently support `box-sizing` without the
`-moz-` prefix, so we use both the vendor-prefixed and unprefixed
properties to ensure that it matches the `content-box` value of other
browsers. It also requires the `height` to be set to `0`.

Fix gh-133
fdb11ae
@necolas necolas closed this in fdb11ae Jan 20, 2013
@kvakes kvakes added a commit to imvu/normalize.css that referenced this pull request Jul 3, 2013
@necolas Normalize `hr`
Firefox uses different `box-sizing` and `height` values to all other
browsers. Firefox doesn't currently support `box-sizing` without the
`-moz-` prefix, so we use both the vendor-prefixed and unprefixed
properties to ensure that it matches the `content-box` value of other
browsers. It also requires the `height` to be set to `0`.

Fix gh-133
b3105fb
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.