27

我的印象是 Safari、Chrome 和 Firefox 等浏览器中的用户代理样式表是浏览器内部的东西，不能直接修改（而是需要覆盖样式属性）。

由于包括 Mozilla 在内的各种网站，我也觉得 Webkit 和 Mozilla 的box-sizing属性的默认值为“content-box”。

我在一个在各种浏览器中查看的相当简单的虚拟页面上对此进行了测试。

我的问题是，在我们的生产应用程序的两个页面上，默认属性是不同的，我们无法弄清楚这是为什么。

一页我们在 Web Inspector 或控制台中看到“border-box”的 box-sizing 属性。它被分配给 CSS 选择器input:not([type="image"]), textarea。

在另一页上，没有提到 Web Inspector 或控制台中的 box-sizing 属性。

有谁知道是否有某种方法可以直接影响特定页面的用户代理样式表中的 box-sizing 定义？也许有一个图书馆可以做到这一点？我们在应用程序中使用prototype.js 和swfobject.js ......

更新：如果我不清楚我的 Web 应用程序中的几乎每个页面以及我在 box-sizing 属性上测试过的每个“虚拟”页面都具有默认的“content-box”值。由于某种原因，我的 Web 应用程序中的一个特定页面在 Web 检查器中显示用户代理样式表（浏览器默认使用的样式表）已将该属性设置为“边框框”。我一生都无法弄清楚为什么会这样。我正在寻找任何可能导致 Firefox 更改该属性的默认值的东西。

4

3 回答 3

46

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.

于 2011-11-30T18:42:43.293 回答
6

我在 chrome 上遇到了同样的问题，默认情况下添加了以下用户代理样式规则：

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

添加 doctype 属性后<!DOCTYPE html>，规则不再出现。

于 2013-05-31T02:03:02.800 回答
2

不，您不能触摸浏览器默认样式表，是的，浏览器确实有不同的框大小规则，特别是在表单字段方面。这是为了与旧浏览器兼容，这些旧浏览器用于完全使用 CSS 无法设置样式的本机操作系统小部件（因此没有“边框”或“填充”）来实现表单字段。

为什么不把你的box-sizing//规则放在网站样式表中-moz-box-sizing？-webkit-box-sizing对我有用，我经常使用它来使具有设定宽度的输入在现代浏览器中对齐。（不过，IE 6-7 不支持它，所以需要一些额外的帮助。）

于 2011-09-23T20:28:37.823 回答