Ширина кнопок в Internet Explorer

Як зробити кнопки в Internet Explorer і Firefox однакової ширини (не задаючи цю саму ширину явно)? Проблема в тому, що IE додає до кнопок додатковий padding ліворуч і праворуч, який забирається не дуже очевидно.



Створимо HTML файл для тестувань наступного змісту.

<p>
<input type="button" value="Шіріна кнопок у IE" class="button" />
<br />
<input type="button" value="Шіріна кнопок у IE" />
</p>

Тобто дві кнопки, однією привласнимо class=”button” – CSS клас, яким ми будемо виправляти ситуацію.


Частина 1


Елегантне рішення я знайшов тут: jehiah.cz – Button Width in IE.

.button {
padding: 0 .25em 0 .25em;
width: auto;
overflow: visible;
}

Все виявляється досить просто, і, що важливо, в результаті отримуємо пройшов стандартизацію CSS.


Приклад тут.
Видно, що зайві відступи в IE зникли, але відображення вcе-таки суттєво відрізняється від Firefox'овского.


Частина 2


У голову приходити думка обнулити відступи і задати розміри шрифтів (У em'ах звичайно).

* {
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
font-size: 62.5%;
color: #000;
background-color: #fff;
}

input {
font-size: 1.3em;
font-family: Arial, sans-serif;
}

.button {
padding: 0 .25em;
width: auto;
overflow: visible;
}



Приклад тут.


Не дуже вражає. У цьому варіанті мені не подобається те що кнопка з class=”button” і без цього класу мають різну ширину Firefox, крім того ширина кнопок з class=”button” трохи різна в IE і Firefox.


Частина 3


Потім я вирішив трохи змінити Приклад 2, а саме class=”button”, Замінив padding: 0 .25em; на $padding: 0 .15em; (Цей код сприймається тільки IE):

. . .
.button {
$padding: 0 .15em;
width: auto;
overflow: visible;
}
. . .


Приклад тут.


Результат мене задовольнив, на цьому і зупинюся. З недоліків – трохи невалідним CSS, але при бажанні і це можна нескладно обійти.


PS Ще можна подивитися тут: brownbatterystudios.com – An Even Better IE Button Width Fix Там окремо розглядається трохи нестандартний випадок, коли кнопка знаходиться всередині комірки таблиці.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*