Question

所以我有这个想法，根据父字体大小，将一堆元素的边界的EM值用作变量，这会减少我的大量冗余代码。这一切都运行良好，直到我意识到一些浏览器/用户具有最小的字体大小，你不能骑过。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

要求：没有sass，没有js，只需要纯粹的CSS。

Answer 1

正如其他人在评论中提到的那样，em像素等价物基于父字体大小。

在处理用户样式表覆盖时，您永远无法完全保证样式将覆盖最终用户的样式。但是，您可以使用!important指令，并使您的规则尽可能具体。你可以快速过火，所以只需测试并使用合理的默认值。

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

这将是一场特殊游戏，但!important是你最强大的资产。