焦点后材料设计输入文本字段标签位置不正确答案

【问题标题】：Material design input text field label is in incorrect place after focus焦点后材料设计输入文本字段标签位置不正确
【发布时间】：2019-12-04 14:31:35
【问题描述】：

我有这样的代码：

<v-text-field label="Outlined" outlined />

在我关注此输入文本后，该输入文本按预期移动到输入的左上角，但它实际上是悬停在该行上：

可能是什么原因？

我试图调试它，我觉得这对我来说很奇怪。基本上标签元素具有绑定样式 left: 0 和 position absolute ofcourse，然后外部 dic 即 .v-text-field-slot 具有相对位置，但标签实际上并不是从左侧 0px 开始

它没有任何填充或其他东西：

所以基本上我不知道为什么它不粘在外部相对定位的 div 的左侧。

实际上感谢 Firefox，我发现了问题所在：

由于转换比例为 0.75，它不在外部 div 的最左侧。我现在正试图找出修复程序，我想知道为什么 Vuetify 没有处理这个问题。

【问题讨论】：

标签： material-design vuetify.js

【解决方案1】：

我通过修改.v-label--active类找到了解决方案：

.v-label--active {
    transform: translateY(-28px) scale(1) !important;
    font-size: 12px !important;
    padding-right: 8px;
    background-color: white;
}

但它更像是破解而不是真正的解决方案。此外，如果我将它放在其他一些背景上，然后是白色，它看起来会很糟糕。所以基本上我仍在寻找解决方案，但现在我将继续使用上面的 css。

编辑：真正的解决方案是我缺少 <v-app></v-app> 包装我的整个应用程序。

【讨论】：