субпикселей, вычисляется и оказывается по-разному в разных браузерах

Question

Цель:

я работаю на код, подобный этому, чтобы создать компонент, где поле ввода имеет встроенную кнопку:

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 пожалуйста)

Answer 1

Как вы уже знаете, проблема возникает из другого подхода к субпикселному исчислению между браузерами

В Chrome, например, границы могут иметь дробный размер, но поля обрабатываются разные (как целые числа).

У меня нет документов об этом от команды Chrome, но это то, что можно увидеть в Дев инструментов:

AFAIK, не существует способа, чтобы изменить это.

Вместо этого вы можете перенести использование поля в кнопку на границу.

Поскольку вам нужно получить место для 1px границы ввода, сделайте то же самое в кнопке, установите границу 1px (вместо поля) и установите ее прозрачно.

Оставшаяся Хитрость заключается в том, чтобы установить свойство фона-клип для заполнения поля, так что эта прозрачность не влияют на фоне

Существует еще одна ошибки в Chrome, дополняющий выраженные в эм не является надежным в этом уровень точности при увеличении браузера. Я изменил это в фрагменте.

Поскольку мы используем кнопку границы, чтобы получить размер в порядке, мы можем использовать границу, используя вместо этого вставку.

* { 
 
    margin: 0; padding: 0; box-sizing: border-box; 
 
} 
 
button, input, wrapper { 
 
    display: inline-block; border-radius: 3px; 
 
} 
 

 
.wrapper { 
 
    position: relative; 
 
    
 
    width: 60%; 
 
    margin: 1em; 
 
    background-color: #ccc; 
 
} 
 

 
input { 
 
    border: 1px solid red; 
 
    width: 100%; 
 
    
 
    background-color: limegreen; 
 
    line-height: 3em; 
 
/* padding: 0.75em; */ 
 
    padding: 10px; 
 
} 
 

 
button { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    border: 1px solid transparent; 
 
    width: 7em; 
 
    margin: 0px; 
 
    background-clip: padding-box; 
 
    box-shadow: inset 0px 0px 0px 2px black; 
 
}

<div class="wrapper"> 
 
    <input type="text"> 
 
    <button>Test</button> 
 
</div>

Другой пример, где кнопка имеет границы. Но нам нужна обертка вокруг, чтобы получить размеры в порядке.

* { 
 
    margin: 0; padding: 0; box-sizing: border-box; 
 
} 
 
button, input, wrapper { 
 
    display: inline-block; border-radius: 3px; 
 
} 
 

 
.wrapper { 
 
    position: relative; 
 
    
 
    width: 60%; 
 
    margin: 1em; 
 
    background-color: #ccc; 
 
} 
 

 
input { 
 
    border: 1px solid red; 
 
    width: 100%; 
 
    
 
    background-color: limegreen; 
 
    line-height: 3em; 
 
/* padding: 0.75em; */ 
 
    padding: 10px; 
 
} 
 

 
.buttonwrap { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    border: 1px solid transparent; 
 
    width: 7em; 
 
    margin: 0px; 
 
    background-clip: padding-box; 
 
} 
 
button { 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    border: 2px solid blue; 
 
    margin: 0px; 
 
}

<div class="wrapper"> 
 
    <input type="text"> 
 
    <div class="buttonwrap"> 
 
     <button>Test</button> 
 
    </div> 
 
</div>

Answer 2

Используйте http://autoprefixer.github.io/, чтобы получить поддержку кросс-браузер, что нужно для отображения: сгибать;

button, input, wrapper { 
    display: inline-block; <----- Remove "display: inline-block;" 
    border-radius: 3px; 
} 

.wrapper { 
    position: relative; 
    display: -webkit-box;<----- Add "display: flex;" 
    display: -webkit-flex;<----- Add "display: flex;" 
    display: -ms-flexbox;<----- Add "display: flex;" 
    display: flex;<----- Add "display: flex;" 
    width: 60%; 
    margin: 1em; 
    background-color: #ccc; 
} 

Внеклассное чтение и изучение материала:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://flexbox.io/#/

https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Примечание: для overide правило гибкости, вам нужно будет использовать сокращенную гибкость, а не конкретную чрезмерную езду из-за текущих недостатков браузера, например.

.item { 
    flex: 0 0 300px; 
} 

/* overide for some reason */ 

.item { 
    flex: 1 0 300px; 
} 

/* NOT */ 

.item { 
    flex-grow: 1; 
} 

вам может понадобиться, чтобы сделать более-поездки для ie11:

.ie11std .wrapper { 
    display:table; 
} 

.ie11std .item { 
    display:table-cell; 
} 

хотя это не будет реагировать.