What causes the "user agent stylesheet" to use "border-box" instead of "content-box" for box-sizing?

Asked 23/9, 2011 at 20:4 Answered 31/5, 2013 at 2:3

I'm under the impression that the user agent stylesheet in browsers such as Safari, Chrome and Firefox is something that is internal to the browser and can't be directly modified (rather a style property needs to be overridden).

I'm also under the impression due to various websites including Mozilla's that the default value of the box-sizing property for Webkit and Mozilla is "content-box."

I tested this on a rather simple dummy page viewed in various browsers.

My problem is that on two pages in our production application the default property is different, and we can't figure out why this is.

One one page we see a box-sizing property of "border-box" in the Web Inspector or console. It's assigned to the CSS selector input:not([type="image"]), textarea.

On the other page there is no mention of the box-sizing property in the Web Inspector or console.

Does anyone know if there's some way to directly affect the box-sizing definition in the user agent stylesheet for a particular page? Maybe there's a library that does this? We're using prototype.js and swfobject.js in the application...

UPDATE: In case I wasn't clear on almost every page in my web application and in every "dummy" page I've tested on the box-sizing property has the default "content-box" value. For some reason one particular page in my web application shows in the web inspector that the user agent stylesheet (the one used by the browser for its defaults) has set that property to "border-box." I can't for the life of me figure out why this is. I'm looking for anything that might cause Firefox to change what its default value for that property is.

Gomer answered 23/9, 2011 at 20:4 Comment(0)

Just had this same issue. What was happening in my case was that someone had put a snippet of Javascript code above the <!doctype html>. As a result, when I inspected DOM through firebug, it appeared that the document didn't have a doctype.

no-doctype

When I removed the snippet of JS code such that the doctype declaration was at the very top of the file, the doctype reappeared and fixed the box-sizing problems I was seeing (the same one you had). See:

Has-doctype

Hope this helps.

Truax answered 30/11, 2011 at 18:42 Comment(3)

Adding <!DOCTYPE html> to my html has solved this issue to me. – Tiana 25/6, 2012 at 15:36

Thanks a lot, I didn't think I would get anything by searching the css user agent code that gets added. – Cloud 13/9, 2012 at 7:9

The issue for me was a <style> tag before the !DOCTYPE – Initiatory 6/2, 2014 at 17:33

I had the same issue on chrome which by default added the following user agent style rule:

input:not([type="image"]), textarea {
    box-sizing: border-box;
}

After adding the doctype property <!DOCTYPE html> the rule no longer appeared.

Goldia answered 31/5, 2013 at 2:3 Comment(1)

thanks. this is exactly what I googled for, and you helped me find this question. sad times when a legacy code still has no decent CSS reset. – Debate 7/4, 2018 at 4:37

No, you can't touch the browser default stylesheet, and yes, browsers do have different rules for box-sizing specifically in respect to form fields. This is for compatibility with old browsers that used to implement form fields entirely with native OS widgets that CSS couldn't style (and so which didn't have ‘border’ or ‘padding’ as such).

Why not just put your box-sizing/-moz-box-sizing/-webkit-box-sizing rule in the site stylesheet? Works for me, I often use this to make inputs with set widths line up across modern browsers. (IE 6–7 don't support it, though, so need some extra help.)

Customer answered 23/9, 2011 at 20:28 Comment(4)

I ended up explicitly defining box-sizing, -moz-box-sizing and -webkit-box-sizing in the style sheet, but I was hoping to find out what might have caused this weirdness with the user agent stylesheet. – Gomer 27/9, 2011 at 16:53

Well, user agent stylesheets are never guaranteed to be the same, but form field rendering is particularly diverse due to the number of different approaches browsers/OSes have had towards styling forms with CSS vs native OS theming. – Customer 27/9, 2011 at 23:55

Hi bobince -- I know all too well that different browsers and OSes handle these things differently. We all should as web developers, LOL. My issue isn't really with that, but with the strange behavior I'm experiencing where on isolated small little test pages I'm getting the "right" default behavior whereas on this particular page in my application I'm getting this "wrong" default behavior. In other words, the wonky defaults that change from browser to browser should at least be consistent within the single browser, but I'm not seeing that here. – Gomer 3/11, 2011 at 14:44

@natlee75: Standards vs Quirks mode can also have an effect here. – Customer 3/11, 2011 at 17:34

Recommended topics

Hot tags