2012-02-14 3 views
14

Привет
У меня есть 3 SPAN, который должен быть inline и есть и min-width.
Очевидно, что на IE SPAN не может иметь min-width. Я пытаюсь использовать DIV, но когда я положил его inline, игнорируется min-width.Внутренний пролет с минимальной шириной на IE

CSS

span { 
    display: inline; 
    min-width: 150px; 
} 

HTML

<span>1</span> 
<span>2</span> 
<span>3</span> 

ответ

23

inline элемент не может принимать width, height, vertical margin & padding. Таким образом, вы должны определить display:inline-block; написать так:

span { 
    display: inline-block; 
    *display: inline;/* for IE7*/ 
    *zoom:1;/* for IE7*/ 
    min-width: 150px; 
} 

Источник: Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification: 10.3 Calculating widths and margins: 10.3.1 Inline, non-replaced elements:

Свойство 'ширина' не применяется. Вычисленное значение «auto» для «margin-left» или «margin-right» становится используемым значением «0».

проверить это http://jsfiddle.net/yCvhB/5/

+0

Работает в Firefox, но не в IE. – Snote

+0

проверить это http://jsfiddle.net/yCvhB/ не работает – sandeep

+0

+1 - редактирование работает для меня. Я вижу, что 'zoom: 1' вызывает эффект' inline-block' для IE7/IE8, чего я не знал. Не могли бы вы добавить, как это работает на ваш ответ? –

1

можно использовать отступы.
Поскольку вы сделали элемент inline, нет смысла указывать минимальную ширину.

+0

В строке добавить текст в ajax. Весь текст не имеет одинакового размера, поэтому я хочу получить минимальный вес. В большинстве случаев текст будет меньше, чем диапазон, и дисплей будет таким же, но что-то, текст может быть длиннее. – Snote

+0

хорошо .. тогда я думаю, вам нужно использовать float: left; что делает атрибут отображения «block», а затем очищает float позже.
Кровавый IE ест все время разработчика ..! – xdevel

+0

+1 для идеи прокладки, которая помогла мне с контенту, который в противном случае имел бы нулевую область, чтобы щелкнуть. –

1

Базируясь мой ответ на sandeep's 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) мы можем что-то работать.

Смежные вопросы