Chrome e larghezza fissa su un div (o altri tag)

StackOverflow https://stackoverflow.com/questions/1900078

Domanda

Ho qualche html che assomiglia a questo: 

<div style="{ display:inline; width: 80px}">fig</div>vitamin c<br>
<div style="{ display:inline; width: 80px}">apple</div>vitamin a<br>
<div style="{ display:inline; width: 80px}">coconut</div>vitamin <br>

in IE.8 questo è mostrato come 

fig       vitamin
apple     vitamin
coconut   vitamin

e tutte le 'vitamine' sono ben allineati. in Chrome il divario non viene creata e quindi non è ben rendering. 

figvitamin
applevitamin
coconutvitamin

La domanda è: è questo un problema / bug con Chrome o è perché il codice HTML non è corretto e IE8 (in questo caso) solo supposizioni meglio le mie intenzioni?

È stato utile?

Soluzione

Chrome e Firefox sono corrette. La larghezza non è una proprietà di stile valido per gli elementi in linea. Sono disponibili diverse opzioni:

Blocchi in linea

Si può fare questo: 

<span>fig</span>vitamin<br>
<span>apple</span>vitamin<br>
<span>coconut</span>vitamin

con: 

span { display: inline-block; width: 80px; }

Si noterà che ho usato <span> invece di <div>. C'è una ragione per questo. <span>s sono naturalmente display: inline e secondo Quirksmode :

  

In IE 6 e 7 opere inline-block   solo su elementi che hanno un naturale   display: inline.

     

Firefox 2 e inferiori non supportano questo   valore. È possibile utilizzare -moz-inline-box,   ma essere consapevoli che non è lo stesso di   inline-block, e non può funzionare come   che ci si aspetta in alcune situazioni.

Galleggianti

È possibile galleggiare le etichette sinistra: 

<div>fig</div>vitamin<br>
<div>apple</div>vitamin<br>
<div>coconut</div>vitamin

con: 

div { float: left; clear: left; width: 80px; }

Se il testo dopo il <div> è sufficientemente grande che andrà a capo al di iniziare della linea (non con il buffer 80px). Si potrebbe desiderare o meno.

Definizione List

Con questo markup: 

<dl>
  <dt>fig</dt><dd>vitamin</dd>
  <dt>apple</dt><dd>vitamin</dd>
  <dt>coconut</dt><dd>vitamin</dd>
</dl>

con: 

dt { float: left; width: 80px; }

Tabelle 

<table>
<tbody>
<tr>
  <td class="left">fig</td>
  <td>vitamin</td>
</tr>
  <td>apple</td>
  <td>vitamin</td>
</tr>
  <td>coconut</td>
  <td>vitamin</td>
</tr>
</tbody>
</table>

con: 

table { border-collapse: collapse; }
td.left { width: 80px; }

Le tabelle saranno di gran lunga la soluzione compatibile con più arretrato (tornare a IE5 o precedenti) in modo che siano ancora spesso utilizzati in situazioni in cui qualcuno potrebbe obiettare che non sono appropriati. Gli ideali della cosiddetta Web semantico sono buone intenzioni e vale la pena aderire a dove possibile, ma avrete anche spesso si finisce in situazioni in cui si sta scegliendo tra "purezza semantica" e la compatibilità all'indietro così una certa quantità di pragmatismo deve prevalere.

Detto questo, a meno che tu non ci stai dicendo qualcosa, non dovreste aver bisogno di andare su questa strada se non si desidera.

Infine, sempre mettere una dichiarazione DOCTYPE sulle tue pagine. Costringe IE dalla modalità quirks alle norme modalità compatibile (entrambe eufemismi). Ad esempio: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<html>
...

Altri suggerimenti

È possibile utilizzare un div che galleggiava a sinistra per i titoli - questo è importante per due forme di colonne e simili su siti web che non vogliono utilizzare le tabelle, o hanno bisogno di maggiore flessibilità che il layout rigorosa che una tabella si limita a. 

<div class="wrapper">
    <div style="float: left; width: 80px;">Banana</div>
    <div>Vitamin Awesome</div>
</div>

Credo che la div esterno potrebbe essere sostituito con un <br clear="both" /> in seguito.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top