Цель:
Я работаю над кодом, подобным этому, чтобы создать компонент , где поле ввода имеет встроенную кнопку:
http://codepen.io/anon/pen/pgwbWG?editors=110
Как вы можете видеть, кнопка позиционируется абсолютно с top
и bottom
, установленными на 0
, для достижения 100% -ного элемента высоты.
Также следует отметить, что граница ввода текста должна оставаться видимой и также обернуть кнопку.
Для этого я добавил кнопку margin: 1px
к кнопке, чтобы было (должно быть) пространство для отображения внешней границы ввода текста с красным цветом (обычно, когда содержимое поля ввода недействительно).
Проблема:
заключается в том, что в Firefox он (в основном) отображается правильно, а в Chrome (и, по-видимому, на новейшем Safari) он будет иметь 1px зазор в нижней части кнопки.
CSS выглядит нормально, но, похоже, это проблема вычисления/округления в рендеринге, где нижнее или верхнее поле кнопки не действительно 1px (можно увидеть, как он проверяет элемент). А также добавление входных данных влияет на это.
При разных значениях масштабирования он добавит или удалит 1px поля в верхнюю или нижнюю часть кнопки, в результате получится 1px-зазор или в закрытой рамке.
Когда я устанавливаю маркер кнопки 0px
, то нижнее поле фиксируется, но я теряю край 1px сверху, заканчивая, чтобы покрыть красную границу текстового ввода.
Примеры:
Вероятно, я не ясен или слишком подробен в объяснении, так что вот несколько скриншотов ошибки, от разных масштабов в Chrome (обратите внимание, что CSS всегда один и тот же):
Решение:
Мне не удалось найти кросс-браузерное решение. Как справиться с этим и получить согласованный компонент? (без Javascript)