非标准自定义元素（非Web Components）的样式设置问题咨询

非标准自定义元素（非Web Components范畴）默认被浏览器当作内联元素渲染，这就是border、float等样式看似不生效的核心原因：

• 内联元素的border虽会被计算尺寸，但受内联盒模型限制，视觉上不会像块级元素那样清晰显示；
• float属性仅对块级/行内块级元素生效，对内联元素无作用。

解决方案 #

给自定义元素设置display属性，将其转为块级或行内块级元素即可：

/* 方案1：直接针对自定义元素设置 */
custom- {
  display: block;
}

/* 方案2：在现有类中添加 */
.border { 
  border: solid;
  display: block;
}

修改后，border会正常显示，float也能按预期工作。

关于调试工具显示尺寸的说明 #

浏览器会计算内联元素的自身尺寸，但内联元素的盒模型特性导致样式视觉上不生效，所以调试工具能看到尺寸，却看不到预期的样式效果。

内容的提问来源于stack exchange，提问作者kofifus