Un'altra domanda "IE sta facendo qualcosa di diverso dagli altri browser", ma questo è un po 'insolito in quanto IE7 fa la cosa giusta ma IE 8 e 9 no.Elementi che non si avvolgono come previsto in IE 8/9
Ecco la situazione, ho un semplice layout a 3 colonne. Le prime 2 colonne hanno una larghezza fissa e la terza voglio essere di larghezza variabile in modo da utilizzare lo spazio disponibile.
Sto emettendo dati testuali nella terza colonna. I dati di testo dovrebbero essere liberi di avvolgere alla fine di un valore/frase di dati - quindi l'output è come.
<span class="nowrap">foo bar</span>
<span class="nowrap">moo bahh</span>
(si veda l'esempio qui sotto anche)
tutto funziona come un fascino in FF, Chrome e IE7, ma Internet Explorer 8 e 9 trattano il nowrap consecutivo si estende da 1 grande elemento nowrap (vale a dire che mette tutto i valori su una riga). C'è spazio bianco tra gli span e così (IMO) dovrebbe essere libero di avvolgere. L'unico modo per ottenere IE8/9 da avvolgere come voglio è includere un po 'di spazio non bianco tra gli intervalli nowrapped.
Questa soluzione è OK, ma io sono curioso di sapere:.
- È IE il rendering del markup correttamente o non correttamente (cioè è la mia aspettativa che i valori dovrebbero avvolgere errato ho solo supporre che IE è in difetto perché gli altri browser lo fanno diversamente)
- Esiste una soluzione più elegante di quella che ho: in un mondo ideale, vorrei assicurarmi che la virgola che si separa non venga mai spostata all'inizio di una nuova riga.
Grazie in anticipo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server">
<style type="text/css">
.leftBit {float:left; margin-right: 10px; background-color: yellow;}
.middleBit {float:left; width:305px; margin-right: 10px; background-color: orange;}
.remainder {margin-left: 420px; min-width: 200px;background-color: #DDD;}
.nowrap { white-space:nowrap;}
.clear {clear: both;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div >
<div class="leftBit">Left bit</div>
<div class="middleBit">This value wraps - but I want to keep the values on the same line</div>
<div class="remainder">
<span>Blue the colour of the sea and the sky, </span>
<span>Green green green green of home, </span>
<span>Red red red red fire engine red red red red</span>
</div>
</div>
<div class="clear"></div>
</div>
<div>
<div >
<div class="leftBit">Left bit</div>
<div class="middleBit">I don't know why these values do not wrap? They do in FF and chrome and IE7 but not IE8/9</div>
<div class="remainder">
<span class="nowrap">Blue the colour of the sea and the sky, </span>
<span class="nowrap">Green green green green of home, </span>
<span class="nowrap">Red red red red fire engine red red red red</span>
</div>
</div>
<div class="clear"></div>
</div>
<div>
<div >
<div class="leftBit">Left bit</div>
<div class="middleBit">Here is my "work around" - I have to include some non-whiite space between the "nowrap" elements. Is this a bug or expected behaviour?</div>
<div class="remainder">
<span class="nowrap">Blue the colour of the sea and the sky </span> ,
<span class="nowrap">Green green green green of home </span> ,
<span class="nowrap">Red red red red fire engine red red red red</span>
</div>
</div>
<div class="clear"></div>
</div>
<hr />
</form>
</body>
</html>
Grazie per la punta circa lo spazio a larghezza zero. Non sono d'accordo sullo spazio tra gli elementi HTML dovrebbe essere ignorato - è specificato in html spec/rfc? In tal caso, si prega di collegare. Ma nessun browser che conosca ignora gli spazi tra gli elementi - ad esempio Foo bar produrrà "Foo bar" quando renderizzato e non "Foobar" –
Dove mai il mio cervello ha ottenuto quel dettaglio (circa 1999) non riesco a trovare ora su Internet. Ho modificato il testo sopra per fare riferimento ai problemi generali relativi alla definizione delle interruzioni di parole. – nosilleg