1
.center{
    margin: auto;
    max-width: 90%;
    overflow: hidden;
}

.input{
    width: 70%;
    float: left;
    outline: none;
    border: none;
    border-radius: 2px 0 0 2px;
    background-color: #999999;
    padding: 7px 0 5px 0;
    color: #000000;
    text-indent: 7px;
}

.btn{
    width: 30%;
    float: left;
    outline: none;
    border: none;
    border-radius: 0 2px 2px 0;
    background-color: #000000;
    color: #FFFFFF;
    padding: 7px 0 5px 0;
    text-align: center;
}

<div class="center">
<input type="text" class="input"><button type="submit" class="btn">search</button>
</div>

Opera и Firefox. Код одинаковый - вид разный. Как это исправить?

1

1 ответ 1

4

Разница из-за высоты контролов по-умолчанию. Т.к. вы не задали высоту для этих элементов - применяется высота по умолчанию (браузерные стили). В инспекторе это видно

В качестве решения: Установите высоту для этих элементов.

.input,
.btn {
    height: 14px;
}

Ваш ответ

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

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