Intervallo lineare con larghezza minima su IE

Ciao
Ho 3 SPAN che deve essere inline e avere e un min-width.
Apparentemente su IE, lo SPAN non può avere un min-width. Provo ad usare DIV ma quando lo metto inline, lo min-width è ignorato.Intervallo lineare con larghezza minima su IE

CSS

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

HTML

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

fonte

2012-02-14 Snote

inline elemento non può prendere width, height, vertical margin & padding. Quindi, è necessario definire display:inline-block; scrivere in questo modo:

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

Fonte: Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification: 10.3 Calculating widths and margins: 10.3.1 Inline, non-replaced elements:

La proprietà 'width' non si applica. Un valore calcolato di 'auto' per 'margin-left' o 'margin-right' diventa un valore usato di '0'.

controllo questo http://jsfiddle.net/yCvhB/5/

fonte

2012-02-14 09:58:07 sandeep

Funziona in Firefox ma non in IE. – Snote

controlla questo http://jsfiddle.net/yCvhB/ non funziona – sandeep

+1 - modifica funziona per me. Vedo 'zoom: 1' causa un effetto' inline-block' per IE7/IE8, che non conoscevo. Ti dispiacerebbe aggiungere come funziona alla tua risposta? –

si potrebbe usare imbottitura.
dal momento che hai reso l'elemento in linea non è possibile specificare la larghezza minima.

fonte

2012-02-14 09:57:33 xdevel

C'è del testo nella span add in ajax. Tutto il testo non ha le stesse dimensioni quindi voglio un peso minimo. Il più delle volte il testo sarà più piccolo dello span e il display sarà lo stesso ma qualcosa, il testo può essere più lungo. – Snote

bene .. quindi suppongo che è necessario utilizzare float: a sinistra; rendendo l'attributo di visualizzazione su "block" e quindi cancellando il float in seguito.
maledetto IE mangia tutto il tempo dello sviluppatore ..! – xdevel

+1 per l'idea di padding, che mi ha aiutato con un contenteditable che altrimenti avrebbe zero area in cui fare clic. –

Basando la mia risposta su sandeep's answer, è possibile utilizzare

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

e dovrebbe funzionare. Dai un'occhiata a questo jsfiddle: http://jsfiddle.net/ramsesoriginal/yCvhB/2/

Internet Explorer ha alcuni problemi con larghezze minime e altezze, ma allo stesso tempo ha problemi con !important, in modo che sfruttano tale (e il fatto che senza specificare troppo pieno ogni con un min-width per IE) possiamo avere qualcosa che funziona.

fonte

2012-02-14 10:31:08 ramsesoriginal

Intervallo lineare con larghezza minima su IE

risposta

Problemi correlati