Question

我有一个特定于环境的CSS问题，我正在尝试纠正。当我在Chrome中测试时，一切正常。但是，在我们的应用程序使用的环境中（基于Chromium），“Comedy”一词在元素获得焦点时显示为“Com edy”。您可以将此元素设想为与您在Netflix应用上看到的海报类似。其中的文本是中心对齐的矩形框，一旦选中，它就会被放大并勾勒出来。显示额外字母空间的问题仅在元素具有焦点时出现。

.poster {
    height: 117px;
    width: 208px;
    position: relative;
    display: inline-block;
    margin-right: 2px;
    margin-left 3px;
    margin-top: 0px;
    margin-bottom: 2px;
    white-space: normal;
}

.poster:focus {
    z-index: 3;
}

.poster-content {
    height: 100%;
    width: 100%;
}

.poster:focus .poster-content {
    -webkit-transform: scale(1.1325);
    transform: scale(1.1325);
    border: 2px solid #0a141a;
    outline: 5px solid #00629b;
    box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.8);
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
}

<div class="poster">
    <div class="poster-content" style="background-image: none;">
        <div class="poster-title">Comedy</div>
    </div>
</div>

PS。这不是CSS的全部数量，而只是按钮聚焦时的活动状态。

Answer 1

非常感谢zgood建议它可能是导致问题的自定义字体。在使用标准字体进行测试后，它不再是一个问题。但是，CSS中的错误来自以下内容：

transform：scale（1.1325）;

将上述内容更改为：

transform：scale（1.1）;

即使仍在使用自定义字体，

也能正确缩放图像中的文本。

神秘的额外字母空间显示在单词

1 个答案: