What causes the "user agent stylesheet" to use "border-box" instead of "content-box" for box-sizing?_问答_开发者

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

开发者 https://www.devze.com 2023-04-07 07:26 出处：网络

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 pro

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.

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.

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

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:

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

Hope this helps.

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.

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