Текстовое поле в браузере Safari не остается равным по высоте кнопке рядом с ним при уменьшении

Question

Текстовое поле в браузере Safari не остается равным по высоте кнопке рядом с ним при уменьшении

0

У меня есть текстовое поле с кнопкой изображения рядом с ним. Когда я уменьшаю масштаб в браузере Safari, текстовое поле не равно по высоте к кнопке изображения рядом с ней. У меня есть эта проблема только в браузере Safari, а не в IE, Mozilla, Chrome и Opera.

HTML

<form>
    <input type="text" name="search_bar">
    <input type="image" src="http://www.somerandomdude.com/wp-content/uploads/search-icon.png">
</form>

CSS

form input[type=text]{
    float: left;
    width: 200px;
    height: 34px;
    border: none;
    outline: none;
}

form input[type=image]{
    float: left;
    width: 36px;
    height: 36px;
}

Скриншоты
сначала: Chrome no zoom
второй: уменьшение масштаба
третья: Safari без увеличения
четвертый: уменьшение сафари

демонстрация

Так кто-нибудь знает способ исправить это?

Rofez 14 март 2014, в 11:59

Источник

0

Любопытно, я использую Safari и не вижу никаких проблем ... Вы пытались просто установить margin: 0px; к вашей form input[type=image] ?
Rofez 14 март 2014, в 10:35
0

По-прежнему возникает та же проблема. Вы уверены, что уменьшаете масштаб до максимума?
user3415788 14 март 2014, в 10:46
0

Я пытался увеличить JSFiddle, но это, по-видимому, невозможно (возможно, но в представлении ничего не происходит) ... Мое плохо.
Rofez 14 март 2014, в 10:50

Показать ещё 1 комментарий

Теги:

html

css

safari

zoom

textfield

1 ответ

Ещё вопросы

Любопытно, я использую Safari и не вижу никаких проблем ... Вы пытались просто установить margin: 0px; к вашей form input[type=image] ?
По-прежнему возникает та же проблема. Вы уверены, что уменьшаете масштаб до максимума?
Я пытался увеличить JSFiddle, но это, по-видимому, невозможно (возможно, но в представлении ничего не происходит) ... Мое плохо.

Rofez · Accepted Answer · 2014-03-14T09-43-00.000Z

Я думаю, проблема связана с тем, что Safari использует только значения int, чтобы расположить его элементы, а другие браузеры используют значения float... Поэтому, когда вы увеличиваете значение, округление округляется для всех браузеров, кроме Safari. Поэтому я предлагаю вам использовать один и тот же размер для ваших входов, например, установить height: 36px; к вашему form input[type=text] (обратите внимание, что вам нужно будет использовать padding: 0px; в этом случае). Итак, ваш CSS начал:

body{
    background: #4679bd;
}

form input[type=text]{
    float: left;
    width: 200px;
    height: 36px;
    border: none;
    outline: none;
    padding: 0px;
}

form input[type=image]{
    float: left;
    width: 36px;
    height: 36px;
}

Надеюсь, это сработает. Хороший день =)!

Вы решаете это, большое спасибо! Такой простой, но очень эффективный, и отличное объяснение тоже.