У меня есть DIV с абсолютным положением, содержащим поле INPUT, мне нужно, чтобы этот вход был центрирован по вертикали и горизонтали внутри div, который я выполнил с отображением: блок и выравнивание текста, проблема в том, что свойство width не работает одинаково путь для IE (10 и ниже), родительский div имеет правильную ширину в chrome и firefox, но совершенно другой в IE10,9 и 8.
На всякий случай эта информация имеет значение, родительский div находится внутри другого div с относительным положением. Я знаю, что это звучит как вопрос из будущего в будущее, но я был очень удивлен, заметив, что это все еще имеет этот вопрос после нормализатора и т.д.
Здесь код HTML и CSS
<div>
<input type="text" />
</div>
div {
position:absolute;
background: blue;
width: 180px;
padding:8px 0;
display:block;
}
input {
border-radius: 5px;
margin: 0;
height: 20px;
position: relative;
display: block;
margin: 0 auto;
}
Проблема вызвана единицами em
.
Если вы сравните IE и Chrome, вы увидите, что зеленая панель в меню больше в IE, чем в Chrome. Это потому, что разница между пикселями здесь и там в размере шрифта.
Они вычисляются по-разному. Я думаю, что IE приближается по-разному.
Возможно, вместо того, чтобы заставить 2 браузера выглядеть одинаково, вы можете сделать его хорошо выглядящим в обоих браузерах. Пользователи не будут знать.
Используйте либо CSS файл, который добавляется в IE-браузерах, либо обнаруживает браузер с помощью javascript и добавляет классы в тело (аналогично модернизму), либо использует хаки CSS.
em
единицы должны быть в порядке. Возможно заполнение, рассчитанное как em-единицы, тоже является настоящей проблемой.