当位置是“相对的”时,自定义元素返回不正确的偏移量:
Custom Element returning incorrect offset when position is "relative:
代码:https://jsfiddle.net/q157xktz/1/
当此自定义元素的位置设置为相对位置时,偏移量显示正确。例如,如果真实偏移量为 0,则显示为 25。这是为什么?有问题的元素是 root-class-bubble
这是因为默认情况下,您的浏览器将每个未知元素呈现为 inline
元素。所有已知的 HTML 元素都具有由 用户代理 设置的默认样式。自定义元素根本没有用户代理提供的任何样式,因此您必须明确地设置您创建的每个元素的样式。因此,例如,将 display: block
添加到 root-class-bubble
元素的样式将解决偏移值。
为了解释偏移值不同的原因,我引用了 this article from MDN,它解释了 offset
属性如何因不同的元素类型而不同。从 块级 元素开始。
For block-level elements, offsetTop, offsetLeft, offsetWidth, and offsetHeight describe the border box of an element relative to the offsetParent.
以及内联级元素:
However, for inline-level elements (such as span) that can wrap from one line to the next, offsetTop and offsetLeft describe the positions of the first border box (use Element.getClientRects() to get its width and height), while offsetWidth and offsetHeight describe the dimensions of the bounding border box. Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text.
代码:https://jsfiddle.net/q157xktz/1/
当此自定义元素的位置设置为相对位置时,偏移量显示正确。例如,如果真实偏移量为 0,则显示为 25。这是为什么?有问题的元素是 root-class-bubble
这是因为默认情况下,您的浏览器将每个未知元素呈现为 inline
元素。所有已知的 HTML 元素都具有由 用户代理 设置的默认样式。自定义元素根本没有用户代理提供的任何样式,因此您必须明确地设置您创建的每个元素的样式。因此,例如,将 display: block
添加到 root-class-bubble
元素的样式将解决偏移值。
为了解释偏移值不同的原因,我引用了 this article from MDN,它解释了 offset
属性如何因不同的元素类型而不同。从 块级 元素开始。
For block-level elements, offsetTop, offsetLeft, offsetWidth, and offsetHeight describe the border box of an element relative to the offsetParent.
以及内联级元素:
However, for inline-level elements (such as span) that can wrap from one line to the next, offsetTop and offsetLeft describe the positions of the first border box (use Element.getClientRects() to get its width and height), while offsetWidth and offsetHeight describe the dimensions of the bounding border box. Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text.