текстовое поле CSS границы неправильно ведет себя в Google Chrome

Question

Когда пользователь фокусирует текстовое поле, я хочу, чтобы граница, равная 1px, была 2px, поэтому, чтобы избежать ощущения нервного GUI, я установил:

 margin-bottom:-2px; 

Это хорошо играет в Firefox, но не в Chrome, это ошибка? любое решение, чтобы это работало в Chrome?

Иногда возникает проблема, когда я отменяю выделение текстового поля, граница остается. Это пример изображения:

Answer 1

Вы должны использовать outline вместо границы, так как это не влияет на расположение и окружающие объекты.

Цитировать quirksmode.org:

Контур коробки почти так же, как границы.

Контур на самом деле не является частью коробка, это никак не считается к ширине или высоте коробки.