css - 基于 EM 的边框宽度替代方案

Question

所以我有了这个想法，基于父字体大小，将一堆元素的边框的 EM 值用作变量，这会为我减少很多冗余代码。一切都很好，直到我意识到某些浏览器/用户有最小字体大小，你不能超过它。

某些浏览器的最小值似乎在 6px 到 12 之间，如果用户修改了甚至更多。由于我没有将它用于字体大小，是否有任何其他技巧可以用来设置边框宽度而无需对像素值进行硬编码？

下面是我希望跨浏览器工作的示例，但例如在 Firefox/Cyber​​fox 中，对我来说，它提供了 6 像素宽的边框而不是 2 像素:

   
.parent{
    font-size:2px;
}
.child{
    border:1em solid black;
}

<div class="parent">
<div class="child">
    Hello world!
</div>
</div>

要求:无sass，无js，纯css即可。

Answer 1

正如其他人在推荐中提到的，em 像素等效值基于父字体大小。

在处理用户样式表覆盖时，您永远不能完全保证您的样式会覆盖最终用户的样式。但是，您可以使用 !important 指令并使您的规则尽可能具体。您可能很快就会过火，因此只需测试并使用合理的默认值即可。

html body .parent{
    font-size:2px !important;
}
.child{
    border:1em solid black;
}

这将是一个特殊的游戏，但是 !important 是您最强大的 Assets 。