Html 退格删除Firefox上的顶部填充

我制作了一个带有标签的输入字段，当焦点或文本为insite时，标签会移到左上角。 然而，这很好。即使是错误处理。但是，当我在firefox上已经空了的输入中按backspace时，它会删除顶部的填充。剩下的时间里，标签都有一半超出了框架

为什么以及如何避免这种情况

演示：

@导入url(https://fonts.googleapis.com/css?family=Roboto);
@字体面{font-family:'Lato'；字体样式：普通；字体重量：300；src:local（'Lato-Light'）、local（'Lato-Light'）、url(https://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2)格式（'woff2'）；unicode范围：U+0100-024F、U+1E00-1EFF、U+20A0-20AB、U+20AD-20CF、U+2C60-2C7F、U+A720-A7FF；}
@字体面{font-family:'Lato'；字体样式：普通；字体重量：300；src:local（'Lato-Light'）、local（'Lato-Light'）、url(https://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2)格式（'woff2'）；unicode范围：U+0000-00FF、U+0131、U+0152-0153、U+02C6、U+02DA、U+02DC、U+2000-206F、U+2074、U+20AC、U+2212、U+2215、U+E0FF、U+EFFD、U+F000；}
@字体面{font-face:'Lato'；字体样式：普通；字体重量：400；src:local（'Lato-Regular'）、local（'Lato-Regular'）、url(https://fonts.gstatic.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2)格式（'woff2'）；unicode范围：U+0100-024F、U+1E00-1EFF、U+20A0-20AB、U+20AD-20CF、U+2C60-2C7F、U+A720-A7FF；}
@字体面{font-face:'Lato'；字体样式：普通；字体重量：400；src:local（'Lato-Regular'）、local（'Lato-Regular'）、url(https://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2)格式（'woff2'）；unicode范围：U+0000-00FF、U+0131、U+0152-0153、U+02C6、U+02DA、U+02DC、U+2000-206F、U+2074、U+20AC、U+2212、U+2215、U+E0FF、U+EFFD、U+F000；}
@字体面{font-face:'Lato'；字体样式：普通；字体重量：700；src:local（'Lato-Bold'）、local（'Lato-Bold'）、url(https://fonts.gstatic.com/s/lato/v11/ObQr5XYcoH0WBoUxiaYK3_Y6323mHUZFJMgTvxaG2iE.woff2)格式（'woff2'）；unicode范围：U+0100-024F、U+1E00-1EFF、U+20A0-20AB、U+20AD-20CF、U+2C60-2C7F、U+A720-A7FF；}
@字体面{font-face:'Lato'；字体样式：普通；字体重量：700；src:local（'Lato-Bold'）、local（'Lato-Bold'）、url(https://fonts.gstatic.com/s/lato/v11/H2DMvhDLycM56KNuAtbJYA.woff2)格式（'woff2'）；unicode范围：U+0000-00FF、U+0131、U+0152-0153、U+02C6、U+02DA、U+02DC、U+2000-206F、U+2074、U+20AC、U+2212、U+2215、U+E0FF、U+EFFD、U+F000；}
@字体{
字体系列：'协同功能'；
src:url（'../font/codropsicons/codropsicons.eot'）；
src:url（'../font/codropsicons/codropsicons.eot？#iefix'）格式（'embedded-opentype'），
url（'../fonts/codropsicons/codropsicons.woff'）格式（'woff'），
url（'../fonts/codropsicons/codropsicons.ttf'）格式（'truetype'），
url（'../font/codropsicons/codropsicons.svg#codropsicons'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
*{
字体：100%/1.5em无衬线；
字体系列：“Lato”、Calibri、Arial、无衬线字体；
字体大小：400；
}
.材料文本输入{
宽度：计算（100%-10px）；
位置：相对位置；
高度：48px；
溢出：隐藏；
保证金：5px；
}
.材料文本输入{
宽度：100%；
身高：100%；
颜色：#333333；
填充顶部：8px；
边界：无；
大纲：无；
}
.物料文本输入标签{
位置：绝对位置；
底部：0px；
左：0；
宽度：100%；
身高：100%；
指针事件：无；
颜色：#1A4175；
边框底部：1px实心#333333；
}
.material文本输入标签：：之后{
内容：“；
位置：绝对位置；
左：0；
底部：-1px；
宽度：100%；
身高：100%；
边框底部：2个实心#1A4175；
转化：translateX（-100%）；
转换：转换0.3s轻松；
}
.材料文本输入标签范围{
位置：绝对位置；
底部：5px；
左：0；
转换属性：转换、字号、字重、颜色；
过渡时间：0.3s；
过渡时间功能：轻松；
}
.材料文本输入：焦点+标签范围，
.材料文本输入：不（：显示占位符）：有效+标签范围{
转化：translateY（-120%）；
字体大小：14px；
字体大小：粗体；
颜色：#1A4175；
}
.材料文本输入：不（：显示占位符）：无效+标签范围{
转化：translateY（-120%）；
字体大小：14px；
字体大小：粗体；
颜色：#8万；
}
.材料文本输入：焦点+标签：：后{
转化：translateX（0%）；
}
.material文本输入：未显示（：占位符）：无效+标签：：后{
边框底部：2个实心#8B0000；
}

占位符/标题


占位符/标题

添加

框尺寸：边框框输入

.material-text-input input {
    width: 100%;
    height: 100%;
    color: #333333;
    padding-top: 8px;
    border: none;
    outline: none;
    box-sizing: border-box;
}

您将输入的高度定义为100%，并添加了另一个8px的填充，因此输入的高度大于父级，并且由于某种原因，在firefox中，他进行了跳转

这是由于输入的高度为
100%
，如果删除高度，则它不再上升。我不明白为什么，但正是因为这个原因。@martinho是的，但输入位置是关闭的（而且很难看）。我得到同样的效果，当我删除填充顶部：8px；完全一样。非常类似于我用javascript-@s.kuznetsov制作的解决方案，我不认为这是解决这个问题的解决方案。而且它应该只与css一起工作。@Silvan，我没有向您提供这个解决方案。只是展示了一下。