У меня есть div, установленный на определенной высоте, и текст внутри этого div вместе с полем ввода. В сафари и хром он подходит довольно хорошо, но в firefox он переполняется из нижней части div и испортил структуру.
HTML:
<div class="formLine">
<div style="float:left;">Input Label</div>
<input value="" />
</div>
CSS:
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.formLine {
border-bottom:1px solid #000;
padding:2px;
height:18px;
}
input {
background-color:#E2F4FE;
height:14px;
outline: 0;
border:0;
border-radius:3px;
line-height:14px;
padding-left:3px;
float:left;
}
Firefox реализует свойство box-sizing
с префиксом -moz-
префиксом (нажмите здесь для поддержки браузера). Измените универсальный селектор на:
*, *:before, *:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input
с помощью padding: 0 3px 0 0;
вместо padding-left: 3px
.