Question

在我的桌面版Chrome中，最小1em值似乎设置为12px，即使您预计会像10px那样小一些。 padding和margin会发生这种情况，并且很难保持所有浏览器的统一性。我也在手机上进行了测试，结果没有任何迹象。

所以我想知道为什么会发生这种情况以及哪种浏览器存在这个问题？

编辑：

这是我在Chrome中的示例。

在Safari中，行为完全不同。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div {
            border: solid 1px red;
        }
        body {
            font-size: 10px;
            width: 100%;
            margin: 0;
        }
        div {
            height: 50px;
            text-align: center;
            width: 50%;
        }
        .row {
            margin-top: 1px;
            width: 100%;
            border: none;
            display: flex;
        }
        .col {
            flex-grow: 1;
            max-width: 100%;
        }
        span {
            border: none;
            font-size: 3em;
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="col"><span>Base font-size: 10px</span></div>
    </div>
    <div class="row">
        <div class="col"></div>
        <div class="col" style="margin-left: 1em;"><span>margin-left: 1em</span></div>
    </div>
    <div class="row">
        <div class="col"></div>
        <div class="col" style="margin-left: 12px;"><span>margin-left: 12px</span></div>
    </div>
    <div class="row">
        <div class="col"></div>
        <div class="col" style="margin-left: 10px;"><span>margin-left: 10px</span></div>
    </div>
    <div class="row">
        <div class="col"></div>
        <div class="col" style="margin-left: 1em;"><span>margin-left: 1em</span></div>
    </div>
</body>
</html>

Chrome中的1em最低值为12px

0 个答案: