Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

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

@drublic

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 closed this pull request from a commit
@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
@kvakes kvakes referenced this pull request from a commit in imvu/normalize.css
@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
Commits on Sep 30, 2012
  1. @saschadube

    Correct hr box-sizing in latest Firefox

    saschadube authored
    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
This page is out of date. Refresh to see the latest.
Showing with 8 additions and 0 deletions.
  1. +8 −0 normalize.css
View
8 normalize.css
@@ -201,6 +201,14 @@ sub {
bottom: -0.25em;
}
+/*
+ * Addresses box-sizing set differently in Firefox.
+ */
+
+hr {
+ -moz-box-sizing: content-box;
+}
+
/* ==========================================================================
Embedded content
========================================================================== */
Something went wrong with that request. Please try again.