Почему в Google Chrome строки в input и select сдвинуты на 2 пиксела вниз? Как это исправить?

Question

[Святослав Хусамов]

Почему в Google Chrome строки в input и select сдвинуты на 2 пиксела вниз? Как это исправить?

Comments

[weranda]

А код можете продемонстрировать?

[Святослав Хусамов]

weranda:

<div class="modal fade" #exampleModal>
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			
			<div class="modal-header">
				<h5 class="modal-title">Записаться на пробное занятие</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			
			<div class="modal-body">
				
				<form>
					
					<div class="form-group">
						<div class="row">
							<div class="col-lg-6">
								<label for="firstname">Имя:</label>
								<input type="text" class="form-control" id="firstname">
							</div>
							
							<div class="col-lg-6">
								<label for="lastname">Фамилия:</label>
								<input type="text" class="form-control" id="lastname">
							</div>
						</div>
					</div>
					

					
					<div class="form-group">
						<label for="level">Ваш уровень:</label>
						<select class="form-control selectpicker" id="level">
							<option value="none">Языка не знаю</option>
							<option value="beginner">Начинающий</option>
							<option value="proffi">Хорошо знаю, нужна практика</option>
						</select>
					</div>
					
					<div class="form-group">
						<label for="channel">Предпочитаемый способ проведения:</label>
						<select class="form-control selectpicker" id="channel">
							<option value="none">Личное присутствие</option>
							<option value="beginner">Skype</option>
						</select>
					</div>
					
					<div class="form-group">
						<label for="email">Электронная почта:</label>
						<input type="text" class="form-control" id="email">
					</div>
					
					<div class="form-group">
						<label for="phone">Номер телефона:</label>
						<input type="text" class="form-control" id="phone">
					</div>
					
					<div class="form-group">
						<label for="city">Ваш город:</label>
						<input type="text" class="form-control" id="city">
					</div>
					
				</form>
				
			</div>
			
			<div class="modal-footer">
				<button type="button" class="btn btn-primary">Записаться</button>
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>
			</div>
			
		</div>
	</div>
</div>

[Святослав Хусамов]

weranda: Это происходит в инпутах. И не только в бутстрапе. В сенче тоже самое.

[s-jet]

Вот фрагмент с участием вашей разметки: https://jsfiddle.net/rayLgbts/
Версия хром: 57.0.2987.133
Ничего не съезжает. Ищите дебагером глюк в css

[Святослав Хусамов]

s-jet: спасибо! буду искать.

[weranda]

Святослав: Видимо дело в правилах стилей или в самом шрифте. Были на моей памяти шрифты, сконвертированные через уже не помню какие-то сервисы и при сравнении оригинального шрифта и сконвертированного была разница в их положении. Было бы лучше увидеть не просто HTML, а рабочий конкретный боевой пример на сайте. Тогда можно было бы что-то определить. Может быть что-то не то, к примеру, в высоте линии, вертикальном выравнивании, отступах и т.п.

Попробуйте в безопасном режиме с отключенными расширениями посмотреть. Лично у меня из-за открытия некоторых расширений может на каком-то сайте где-то что-то "поехать".

[Святослав Хусамов]

weranda: шрифт тут не причем. В сенче там вообще шрифты ариал использутся. Да и до бага все работало нормально. С другой стороны, может я и там и сям может действительно косяк допустил одинаковый. Надо будет искать.

[weranda]

Святослав: Открыл первое что попалось в демках Sencha с полем ввода и вот что обнаружил:

Полю ввода задано правило:
height: calc(100% + 3px);
Вероятнее всего виновником вашего случая являются стили, а также большая величина верхнего отступа, судя по примеру.

[Святослав Хусамов]

weranda: то есть там и там проблема фреймворков? Но я их во время работы не менял. Лишь браузер обновлял.
А как вы так быстро сделали анимированный гиф?

[weranda]

Святослав: LICEcap и я не знаю в чем конкретно проблема в вашем случае. Гадать на голом HTML без стилей не вижу смысла.

Answer 1

[dm]

normalize.css

Comments

[Святослав Хусамов]

А при чем тут это? Это глюк браузера. Ибо раньше не было. И мало того, в прошлом году этот глюк был. Они потом исправили. А теперь вот снова вылез.

[Святослав Хусамов]

Кстати, попробовал этот нормалайз. Не помогает.

Answer 2

[s-jet]

Изначально reset делаете стилей?

Comments

[Святослав Хусамов]

А при чем тут ресет? Это глюк браузера. Ибо раньше не было. И мало того, в прошлом году этот глюк был. Они потом исправили. А теперь вот снова вылез.