是什么原因导致"用户代理样式表"使用"border-box"而不是"content-box"来进行大小调整？
nat*_*e75 26 css user-agent border-box
我的印象是,浏览器(如Safari,Chrome和Firefox)中的用户代理样式表是浏览器内部的,无法直接修改(而是需要覆盖样式属性).
由于包括Mozilla在内的各种网站,Webkit和Mozilla 的box-sizing属性的默认值是"content-box",我也感觉不到.
我在各种浏览器中查看的相当简单的虚拟页面上测试了这个.
我的问题是,在我们的生产应用程序的两个页面上,默认属性是不同的,我们无法弄清楚为什么会这样.
在一页中,我们在Web Inspector或控制台中看到了"border-box"的box-sizing属性.它被分配给CSS选择器输入:not([type ="image"]),textarea.
在另一页上,没有提到Web Inspector或控制台中的box-sizing属性.
有没有人知道是否有某种方法直接影响特定页面的用户代理样式表中的box-sizing定义？也许有一个图书馆这样做？我们在应用程序中使用prototype.js和swfobject.js ......
更新:如果我在我的Web应用程序和每个"虚拟"页面中几乎每个页面都不清楚,我在box-sizing属性上测试过具有默认的"content-box"值.出于某种原因,我的Web应用程序中的一个特定页面在Web检查器中显示用户代理样式表(浏览器用于其默认值的样式表)已将该属性设置为"border-box".我无法为我的生活找出原因.我正在寻找可能导致Firefox更改其属性的默认值的任何内容.
小智 44
刚刚遇到同样的问题.在我的案例中发生的事情是有人在上面放了一段Javascript代码<!doctype html>.结果,当我通过firebug检查DOM时,似乎文档没有doctype.
当我删除JS代码片段以使doctype声明位于文件的最顶层时,doctype重新出现并修复了我所看到的盒子大小问题(与你的相同).看到:
希望这可以帮助.
- 将"<!DOCTYPE html>"添加到我的html中已经解决了这个问题. (4认同)
我在chrome上遇到了同样的问题,默认情况下添加了以下用户代理样式规则:
input:not([type="image"]), textarea {
box-sizing: border-box;
}
添加doctype属性后<!DOCTYPE html>,规则不再出现.
不，您不能触摸浏览器默认样式表，是的，浏览器对于框大小确实有不同的规则，特别是在表单字段方面。这是为了与旧浏览器兼容，这些浏览器过去完全使用 CSS 无法设置样式的本机操作系统小部件来实现表单字段（因此没有 \xe2\x80\x98border\xe2\x80\x99 或 \xe2\x80\ x98padding\xe2\x80\x99 等）。
\n\n为什么不直接将您的box-sizing//-moz-box-sizing规则-webkit-box-sizing放入站点样式表中？对我有用，我经常使用它来使具有设置宽度的输入在现代浏览器中对齐。（IE 6\xe2\x80\x937 不支持它，所以需要一些额外的帮助。）