输入字段中的奇怪边缘和具有非整数值的高度

Question

我正在为一个非常常见的用户登录表单编写一些 CSS，除了当我从另一台使用相同浏览器 (Firefox) 和操作系统 (Ubuntu) 的计算机登录时，一些外面出现奇怪的白边。

更奇怪的是，它们往往会通过调整 window.

的大小来出现和消失

因为？如何预防？

感谢大家的帮助！ :)

HTML:

<div class="npt nptFocus">
    <span>Aa</span>
    <input type="text" name="usr" placeholder="Nickname">
</div>

少:

// Palette
@main_color: blue;

@main: darken(saturate(@main_color, -97%), 25%);
@neutral: saturate(darken(@main_color, -25%), -25%);
@verde: #118769;
@rosso: #fe5f55;
@bianco: darken(saturate(@main_color, -40%), -45%);

@v_soft = 10%;
@v_medium = 25%;
@v_hard = 40%;

@neutral_dark: darken(@neutral, @v_soft);
@verde_dark: darken(@verde, @v_soft);
@rosso_dark: darken(@rosso, @v_hard);

@main_light: lighten(@main, @v_hard);
@main_dark: darken(@main, 8%);

@radius: 5px;

.npt {
    display: table;
    background: @bianco;
    border-radius: @radius;
    border: solid 1px @main_light;
    width: 100%;
    overflow: hidden;

    input, span{
        display: table-cell;
        padding: 10px;
        transition: 0.25s;
    }

    input {
        border: none;
        background: none;
        border-radius: 0px;
        color: @main;
        width: 100%;
    }

    span {
        border-right: solid 1px darken(@main_light, -15%);
        color: darken(@main, -40%);
        background: darken(@main_light, -25%);
        padding-left: 15px;
        padding-right: 15px;
        width: 55px;
    }

    &.nptFocus {
        border: solid 1px @neutral_dark;
        span {
            border-right: solid 1px @neutral_dark;
            color: @bianco;
            background: @neutral_dark;
        }
    }
}

屏幕：

更新 1：添加编译 CSS

.npt {
  display: table;
  background: #ebebfa;
  border-radius: 5px;
  border: solid 1px #a3a3a8;
  width: 100%;
  overflow: hidden;
}
.npt input,
.npt span {
  display: table-cell;
  padding: 10px;
  transition: 0.25s;
}
.npt input {
  border: none;
  background: none;
  border-radius: 0px;
  color: #3e3e42;
  width: 100%;
}
.npt span {
  border-right: solid 1px #cacace;
  color: #a3a3a8;
  background: #e5e5e6;
  padding-left: 15px;
  padding-right: 15px;
  width: 55px;
}
.npt.nptFocus {
  border: solid 1px #6363e9;
}
.npt.nptFocus span {
  border-right: solid 1px #6363e9;
  color: #ebebfa;
  background: #6363e9;
}
.npt.nptError {
  border: solid 1px #fe5f55;
}
.npt.nptError span {
  border-right: solid 1px #fe5f55;
  color: #ebebfa;
  background: #fe5f55;
}
.npt.nptError.nptFocus {
  border: solid 1px #d38580;
}
.npt.nptError.nptFocus span {
  border-right: solid 1px #d38580;
  background: #d38580;
}
.npt.nptOk {
  border: solid 1px #118769;
}
.npt.nptOk span {
  border-right: solid 1px #118769;
  color: #ebebfa;
  background: #118769;
}
.npt.nptOk.nptFocus {
  border: solid 1px #6cac9b;
}
.npt.nptOk.nptFocus span {
  border-right: solid 1px #6cac9b;
  background: #6cac9b;
}

更新 2：

在@Manas Khandelwal 的帮助下以及一起进行的测试后，这似乎是由于浏览器渲染错误造成的，因为表单上方的徽标将宽度声明为百分比，永远不会有高度具有整数值 .

想法？

真正唯一的解决办法是真的必须通过 JavaScript?

舍入所有高度

$('.roundHeight').each(function(){
    if(!$(this).is("[data-exmargin]")) $(this).attr('data-exmargin',parseFloat($(this).css('marginTop')));
    var d = parseFloat($(this).attr('data-exmargin')) - ($(this).height() - Math.floor($(this).height()));
    $(this).css('marginTop', d + 'px');
});

Answer 1

在输入元素中添加outline: none;；

Codepen: https://codepen.io/manaskhandelwal1/pen/WNGgQwP

输入字段中的奇怪边缘和具有非整数值的高度

Strange edges in the input fields and heights with non-integer value

css

less