什么导致“用户代理样式表”使用“边框”而不是“内容盒”盒尺寸？ [英] What causes the "user agent stylesheet" to use "border-box" instead of "content-box" for box-sizing?
问题描述
我的印象是，浏览器（如Safari，Chrome和Firefox）中的用户代理样式表是浏览器内部的，不能直接修改（而是需要重写样式属性）。 / p>
由于各种网站（包括Mozilla的），Webkit和Mozilla的 box-sizing 属性的默认值为内容框。
我在一个相当简单的在各种浏览器中查看的虚拟页面上测试了这个页面。
问题是，在我们的生产应用程序的两个页面上，默认属性不同，我们无法弄清楚为什么是这样。
在Web Inspector或控制台中调整border-box的大小属性。它已分配给CSS选择器 input：not（[type =image]），textarea
。
有人知道是否有一些方法直接影响用户代理样式表中的框大小定义一个特定的页面？也许有一个图书馆这样做？我们在应用程序中使用prototype.js和swfobject.js ...
UPDATE ：如果我不清楚我的web应用程序中的每个页面以及我在box-sizing属性上测试的每个虚拟页面都有默认的content-box值。由于某种原因，我的Web应用程序中的一个特定页面在Web检查器中显示用户代理样式表（浏览器用于其默认值的样式表）已将该属性设置为border-box。我不能为我的生活找出为什么这是。我正在寻找任何可能导致Firefox改变其属性的默认值的任何东西。
问题。在我的情况下发生的是，有人已经在<！doctype html> 上面放置一段JavaScript代码。因此，当我通过firebug检查DOM时，文档似乎没有doctype。
当我删除JS代码片段，使得doctype声明在最顶层的文件，doctype重新出现，并修复了我看到的盒子大小问题（同一个你有）。
参见：
希望这有助。
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.
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:
Hope this helps.
这篇关于什么导致“用户代理样式表”使用“边框”而不是“内容盒”盒尺寸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
