Firefox для настольных ПК и Chrome для мобильных устройств с загадочным вводом ширины текста - PullRequest
Новая
       9

Firefox для настольных ПК и Chrome для мобильных устройств с загадочным вводом ширины текста

0 голосов
/ 24 ноября 2018

Таким образом, похоже, что рабочий стол Firefox и мобильное приложение Chrome отображают веб-страницы с дополнительными отступами до ширины ввода текста (где Chrome Desktop отображает их, как и ожидалось):

Chrome vs Firefox

Пока что ни одно из решений, которые я пробовал по аналогичным проблемам дополнения Firefox в StackOverflow, до сих пор, похоже, не решило эту проблему.Ниже приведены проверки Chrome и Firefox для заполнения поля ввода текста (обратите внимание, что Firefox добавляет дополнительные 18,1667 пикселей):

Chrome:

Chrome element inspection

Firefox:

Firefox element inpection

Код можно увидеть ниже: 

:focus
{
    outline: none;
}

.fancy_input_box
{
    text-align: left;
    display: inline-block;
    margin: 40px 3% 1px;
    position: relative;
}

.fancy_input
{
    font: 15px/24px "Lato", Arial, sans-serif;
    color: #aaa;
 
    box-sizing: border-box;

    letter-spacing: 1px;
    border: 0;
    padding: 7px 7px;
    border: 1px solid #ccc;
    position: relative;
    background: transparent;
}

.fancy_input ~ .fancy_label
{
    position: absolute;
    left: 14px;
    width: 100%;
    top: 10px;
    color: #aaa;
    letter-spacing: 0.5px;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;

    z-index: -1;
}

.fancy_input:focus ~ .fancy_label
{
    top: -18px;
    left: 1px;
    font-size: 12px;
    color: white !important;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
}

.fancy_input:not(focus):valid ~ .fancy_label
{
    top: -18px;
    font-size: 12px;
    left: 1px;
    color: #aaa;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="thing.css">
</head>

<body style="background-color:grey;">
  <div class="fancy_input_box">
    <input class="fancy_input" type="text" placeholder="" maxlength="3" size="5" required>
    <label class="fancy_label">F00</label>
  </div>
</body>
</html>

1 Ответ

0 голосов
/ 25 ноября 2018

Я не знаю, отличается ли ситуация на вашем компьютере, но на моем это комбинация двух факторов.

Во-первых, очевидно, результирующая ширина входов с атрибутом sizeоснован на исходном шрифте, а не на шрифте, указанном в таблице стилей.Решение: установите ширину в таблице стилей тоже в ch единицах.

И шрифт Lato также, кажется, вызывает проблемы.Если я уберу это и просто использую Arial, результат будет одинаковым в обоих браузерах.

Надеюсь, это поможет! 

:focus
{
    outline: none;
}

.fancy_input_box
{
    text-align: left;
    display: inline-block;
    margin: 40px 3% 1px;
    position: relative;
}

.fancy_input
{
    font: 15px/24px 'Arial', sans-serif;
    color: #aaa;
 
    box-sizing: border-box;

    letter-spacing: 1px;
    border: 0;
    padding: 7px 7px;
    border: 1px solid #ccc;
    position: relative;
    background: transparent;
    width: 8ch;                  /* new */
}

.fancy_input ~ .fancy_label
{
    position: absolute;
    left: 14px;
    width: 100%;
    top: 10px;
    color: #aaa;
    letter-spacing: 0.5px;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;

    z-index: -1;
}

.fancy_input:focus ~ .fancy_label
{
    top: -18px;
    left: 1px;
    font-size: 12px;
    color: white !important;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
}

.fancy_input:not(focus):valid ~ .fancy_label
{
    top: -18px;
    font-size: 12px;
    left: 1px;
    color: #aaa;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="thing.css">
</head>

<body style="background-color:grey;">
  <div class="fancy_input_box">
    <input class="fancy_input" type="text" placeholder="" maxlength="3" size="5" required>
    <label class="fancy_label">F00</label>
  </div>
</body>
</html>
...