相关疑难解决方法(0)

我在哪里可以找到浏览器的HTML元素的默认CSS？

许多HTML元素都带有一些默认的CSS属性,这些属性有时会导致未知/不需要的行为.例如,输入框在不同浏览器中的显示方式不同.我正在寻找一个涵盖新CSS3属性和新HTML5元素的地方.

我已经在其他(更老的)问题(例如浏览器的默认CSS样式表)中看到了答案,这些答案提示了CSS重置的解决方案.这个解决方案有时候不需要,我常常想保留一些基本属性(例如Chrome中输入框的突出显示).换句话说:我不想因为我不知道他们做了什么而摆脱了.

那么,是否有一个网站可以提供所有这些信息(或者可能是大多数)？

我想看到各种浏览器的默认样式表中使用的特定样式元素.浏览器是否有我在系统上找到并读取的实际基于文件的样式表？如果是这样,那些文件的默认位置是什么？如果没有,我可以在哪里找到这些信息？

我正在开发一个应用程序,用于比较不同浏览器中呈现的DOM,以便找到差异.我将其视为进行屏幕截图比较的替代方案.此外,这可以通过编程方式完成,减少误报(至少这是我的想法).

我通过element.getBoundingClientRect()计算元素的实际位置,如下所示:检索html元素的位置xy.

我在Firefox和Chrome上尝试过,并从中生成了一个JSON DOM结构.现在我对我得到的东西感到很困惑.我知道浏览器在子像素级别上处理像素值的方式不同,但它并不像Chrome总是有圆形数字而Firefox总是有分数.它几乎总是这样:

火狐

{
    "name": "SPAN",
    "style": {
      "display": "block",
      "top": "1390.5",
      "left": "824.61669921875",
      "width": "123.38333129882812",
      "height": "27"
    }
}

铬

{
    "name": "SPAN",
    "style": {
      "display": "block",
      "top": "1390",
      "left": "824.640625",
      "width": "123.359375",
      "height": "27"
    }
  }

chrome中的最高值始终是整数,而在firefox中,它始终是相同的值,但要高出.5或.25.

高度要比铬高1或0.5.

所有其他值有时是两个浏览器中的分数.如果它们是分数,它们永远不会相等(firefox总是具有更高的值).如果它们是整数,则它们是相同的.

我从来没有想到过这样的事情.特别是顶部和高度值的奇怪之处.我会想,渲染只是不同,这导致(不规则!!)不同的像素值.

所以我的问题是:如果我进行这种比较,我可以从中得出任何规则吗？有谁知道firefox的舍入规则？或者我是否必须进行宽容比较,以检查这些值是否相互间隔超过1个单位？

更新:

如果您想快速查看,请访问http://example.com/(因为它有一个非常小的DOM)并document.getElementsByTagName("body")[0].getBoundingClientRect()在firefox和chrome上输入javascript控制台.Y,高度和顶部值在firefox中是疯狂的长浮点值,而在它们中更短并且在chrome中奇怪地舍入.

我能够使用用户样式表，document.styleSheets但找不到“用户代理”样式表。
有没有办法获得默认的用户代理样式？