Chrome为自定义HTML元素的offsetWidth返回0

Question

在尝试创建一个Angular指令,使其内容的大小适应容器的大小时,我偶然发现了以下问题:

最小的HTML代码段:

<my-tag id="testWidth">
  <div>some text</div>
</my-tag>

当读取宽度时my-tag,我得到0Chrome 的结果,而Firefox返回正确的结果.在Chrome中,如果我替换,结果也是正确my-tag的div.

这是我用来获取宽度的表达式:

document.getElementById('testWidth').offsetWidth

据我所知,my-tag应该是一个有效的自定义元素名称.还有什么我做错了,或者这只是Chrome中的一个错误？

Chrome版本:49.0.2623.112米

jsfiddle快速测试

我试图了解Chrome的行为是否正确或是否是错误.

该MDN文档说:

HTMLElement.offsetWidth只读属性返回元素的布局宽度.

据我所知,它并没有说这仅适用于具有块显示的元素.我还通过Firefox返回我期望的事实来支持我的理解.

对于span标签也可以观察到相同的行为差异,请看这个小提琴.

Answer 1

你需要设置my-tag元素的样式 display: block

这里是小提琴https://jsfiddle.net/Lvntyrjy/1/