Встроенный диапазон с минимальной шириной в IE
Привет.
У меня есть 3 SPAN
, которые должны быть inline
и иметь и min-width
.
Очевидно, что в IE SPAN
не может быть min-width
. Я пытаюсь использовать DIV
, но когда я помещаю его inline
, min-width
игнорируется.
CSS
span {
display: inline;
min-width: 150px;
}
HTML
<span>1</span>
<span>2</span>
<span>3</span>
Ответы
Ответ 1
Элемент inline
не может принимать width
, height
, vertical margin
и padding
. Поэтому вы должны определить display:inline-block;
следующим образом:
span {
display: inline-block;
*display: inline;/* for IE7*/
*zoom:1;/* for IE7*/
min-width: 150px;
}
Источник: Каскадные таблицы стилей Уровень 2 Редакция 1 (CSS 2.1) Спецификация: 10.3 Расчет ширины и полей: 10.3.1 Встроенные, не замененные элементы:
Свойство 'width' не применяется. Вычисленное значение "auto" для "margin-left" или "margin-right" становится используемым значением "0".
проверьте http://jsfiddle.net/yCvhB/5/
Ответ 2
вы можете использовать отступы.
поскольку вы сделали элемент inline, нет смысла указывать минимальную ширину.
Ответ 3
Основываясь на ответе sandeep answer, вы можете использовать
span {
display: inline-block;
*display: inline;
*zoom:1;
width: auto !important;
width 150px;
min-width: 150px;
}
и он должен работать. Проверьте этот jsfiddle: http://jsfiddle.net/ramsesoriginal/yCvhB/2/
Internet Explorer имеет некоторые проблемы с минимальной шириной и высотой, но в то же время он имеет проблемы с !important
, поэтому использование этого (и тот факт, что без указания переполнения каждый из них является минимальной шириной для IE), мы можем что-то работает.