1

Делаю кроссбраузерность для сайта - XTimer. И все бы хорошо, если бы не Mozilla. Тут без слов, лучше сами посмотрите...

Проблема в <input type="number">, который пилит запредельные, не пойми откуда отступы на весь экран. Сначала думал, что затык в единицах измерения - vw/vh (которые использую). Но мозилла так же само добавляет отступы ко всем единицам: px, em, %, rem, pt...

Искал решение на хабре, тостере и в офишиал док. мозиллы. Ничего толкового не нашел. С меня печенька за помощь! ^^ Сайт открыт в Firefox Mozilla (большие горизонтальные отступы)

form {
    font-size: 10vw;
}
form input {
    background-color: transparent;
}
form input[type="number"] {
    margin: 0;
    padding: 0;
    font-family: Intro;
    text-align: center;
    border: none;
    outline: none;
    color: #000;
}
form input[type="number"]::-webkit-input-placeholder {
    color: #000;
}
table {
    margin: 0 auto;
}
table .numbers-of-time {
    line-height: 0;
}
table .name-of-time {
    font-size: 3vw;
    color: #ccc;
}
table .buttons-of-time {
    font-size: 0;
}
table .buttons-of-time input {
    margin: 0 15px;
}
<div id="timer">
            <form>
                <table>
                    <tr class="numbers-of-time">
                        <td><input type="number" id="for-hour" placeholder="00" min="0" max="23" /></td>
                        <td>:</td>
                        <td><input type="number" id="for-minute" placeholder="00" min="0" max="59" /></td>
                        <td>:</td>
                        <td><input type="number" id="for-second" placeholder="00" min="0" max="59" /></td>
                    </tr>
                    <tr class="name-of-time">
                        <td>HOUR</td>
                        <td></td>
                        <td>MINUTE</td>
                        <td></td>
                        <td>SECOND</td>
                    </tr>
                    <tr>
                        <td class="buttons-of-time" colspan="5">
                            <input type="button" id="play" onclick="Timer(); TimerPlay(); ShowPause();" />
                            <input type="button" id="pause" onclick="TimerPause(); ShowResume();" />
                            <input type="button" id="reset" onclick="DoReset();" />
                            <input type="button" id="refresh" onclick="XbuttonNorm();" />
                            <audio id="soundOfEnd" loop>
                                <source src="sound/sound.mp3" type="audio/mpeg">
                            </audio>
                        </td>
                    </tr>
                </table>
            </form>
        </div>

1 ответ 1

1
input[type="number"] {
  width: 6em;
}
2
  • Теперь такие "ужасные" отступы еще и на Хроме)) Но в Мозиле они немного уменьшильсь! Наилучше подходит 2em и даже скорее всего "идеально", но вопрос все же остаеться: "Почему Mozilla делает отступы у input number?!" 29 ноя 2017 в 21:20
  • Это не отступы, а ширина. Если хочешь какое-то конкретное значение, его стоит задавать явно, а не рассчитывать, что оно у всех одинаковое по умолчанию.
    – Qwertiy
    29 ноя 2017 в 21:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.