Rozpiętość liniowa z min-width na IE

Hi
Mam 3 SPAN, które musi być inline i mieć i min-width.
Najwyraźniej na IE, SPAN nie może mieć min-width. Próbuję użyć DIV, ale kiedy wstawię to inline, min-width jest ignorowane.Rozpiętość liniowa z min-width na IE

CSS

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

HTML

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

Źródło

2012-02-14 Snote

inline element nie może width, height, vertical margin & padding. Więc trzeba określić display:inline-block; pisać tak:

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

Źródło: Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification: 10.3 Calculating widths and margins: 10.3.1 Inline, non-replaced elements:

'szerokość' właściwość nie ma zastosowania. Obliczona wartość "auto" dla "margin-left" lub "margin-right" staje się wartością "0".

check to http://jsfiddle.net/yCvhB/5/

Źródło

2012-02-14 09:58:07 sandeep

Działa w przeglądarce Firefox, ale nie w IE. – Snote

sprawdź http://jsfiddle.net/yCvhB/ nie działa – sandeep

+1 - edycja działa dla mnie. Widzę, że 'zoom: 1' powoduje efekt' inline-block' dla IE7/IE8, którego nie znałem. Czy mógłbyś dodać, jak działa to w twojej odpowiedzi? –

można użyć wyściółkę.
od momentu, gdy element został wstawiony, nie ma potrzeby określania szerokości minimalnej.

Źródło

2012-02-14 09:57:33 xdevel

Istnieje tekst w rozszerzeniu w ajax. Cały tekst nie ma tego samego rozmiaru, więc chcę mieć minimalną wagę. W większości przypadków tekst będzie mniejszy niż rozpiętość, a wyświetlacz będzie taki sam, ale coś, tekst może być dłuższy. – Snote

cóż .. to myślę, że musisz użyć float: left; uczynienie atrybutu wyświetlania "blokiem", a następnie wyczyszczenie float później.
krwawy IE zjada cały czas programisty ..! – xdevel

+1 za pomysł wypełnienia, który pomógł mi z zadowoleniem, który w przeciwnym razie miałby zerowy obszar do kliknięcia. –

Opierając moją odpowiedź na sandeep's answer, można użyć

span { 
    display: inline-block; 
    *display: inline; 
    *zoom:1; 
    width: auto !important; 
    width 150px; 
    min-width: 150px; 
}

i powinno działać. Sprawdź tę jsfiddle: http://jsfiddle.net/ramsesoriginal/yCvhB/2/

Internet Explorer ma pewne problemy z minimalnych szerokościach i wysokościach, ale w tym samym czasie ma problemy z !important, więc eksploatujące że (i fakt, że bez określenia przepełnienie każdy z jest min-width dla IE) możemy mieć coś działającego.

Źródło

2012-02-14 10:31:08 ramsesoriginal

Rozpiętość liniowa z min-width na IE

Odpowiedz

Powiązane problemy