2016-05-16 113 views
2

我所拥有的是一个元素,其造型被破坏:宽度和高度都是错误的。问题是,在此元素上没有指定widthheight:如果您在Chrome开发工具中查看它,则会看到这些属性变灰,如下所示,因为它们只是基于其他浏览器计算的信息。影响元素宽度和高度计算的因素是什么?

enter image description here

,并承诺之间的比较差异列表,我看不出有什么样式规则这个元素的改变。这意味着左右元素被更改:它的许多孩子之一,或父母。

我想知道的是如何确定哪些元素或规则影响该计算,以便进行调试?

我希望有一种清单,例如“检查所有子元素的宽度属性,如果它已设置,则...,否则继续查看可能影响JavaScript的JavaScript ...”

编辑:问题可以表述为:“”?你的浏览器检查哪些因素,在什么样的顺序以怎样的优先级,以确定一个元素的尺寸”

+1

在没有看到代码,许多事情会影响宽度和高度。内容可能是最大的,父母或相邻元素的宽度,如果它们是浮动的,等等。 – n8wrl

+1

此问题不应该要求查看代码。它本质上是这样的:“浏览器检查什么因素,按照什么顺序和优先顺序来确定元素的尺寸?”这是与代码无关的。 – Aerovistae

回答

2

见这些规格:https://www.w3.org/TR/CSS2/visudet.html#propdef-height

有一些不同类型的高度计算,如o在第10.6节中强调。看看那里的小节,以确定如何计算元素的高度。

(有一些该网页上的部分由其他规格更新的警告,但在更新的快速检查似乎不包括高度的任何变化。)