Perché la spaziatura tra più colonne non funziona in Chrome?

Question

Le colonne CSS vengono visualizzate in modo diverso in Chrome dal modo in cui vengono visualizzate in Firefox e IE9. Questa è la visualizzazione corretta in Firefox:

Ecco come viene visualizzato in modo non corretto in Chrome:

Ho provato a cambiare il li-display: inline-block, che è un miglioramento di sorta in Chrome, ma gli elementi di elenco più ristretti vengono visualizzati nella stessa "cella".

h3, h4 { 
 
    font-weight: bold; 
 
    padding: 0.5em 0; 
 
} 
 
.results { 
 
    margin-top: 1em; 
 
    box-shadow: 0 0 20px #99AABB; 
 
    background-color: white; 
 
    border: 3px solid #CCCCCC; 
 
    margin-left: 2.7em; 
 
    padding: 0 1em; 
 
    position: absolute; 
 
    right: 2.5em; 
 
    text-align: left; 
 
    z-index: 10; 
 
} 
 
.results ul { 
 
    -moz-column-count: 6; 
 
    -moz-column-gap: 1em; 
 
    -webkit-column-count: 6; 
 
    -webkit-column-gap: 1em; 
 
    column-count: 6; 
 
    column-gap: 1em; 
 
} 
 
.results ul.articles { 
 
    -moz-column-count: 3; 
 
    -moz-column-gap: 1em; 
 
    -webkit-column-count: 3; 
 
    -webkit-column-gap: 1em; 
 
    column-count: 3; 
 
    column-gap: 1em; 
 
}

<div class="results"> 
 
    <h3>Search Results</h3> 
 
    <div> 
 
     <h4>Players</h4> 
 
     <ul class="plain"> 
 
      <li>Barry Bannan</li> 
 
      <li>Gareth Barry</li> 
 
      <li>Leon Barnett</li> 
 
      <li>Kyle Bartley</li> 
 
      <li>Barry Ferguson</li> 
 
      <li>Ashley Barnes</li> 
 
      <li>Marvin Bartley</li> 
 
      <li>Shaun Barker</li> 
 
      <li>Arran Lee-Barrett</li> 
 
      <li>Tyrone Barnett</li> 
 
      <li>Ross Barkley</li> 
 
      <li>Ronald Zubar</li> 
 
      <li>Barry Douglas</li> 
 
      <li>Patrick Barrett</li> 
 
      <li>Darren Barr</li> 
 
      <li>Ross Barbour</li> 
 
      <li>David Barron</li> 
 
      <li>Marc Bartra</li> 
 
      <li>Beñat Etxebarria</li> 
 
      <li>Wakaso Mubarak</li> 
 
      <li>Abdel Barrada</li> 
 
      <li>José Barkero</li> 
 
      <li>Antonio Barragán</li> 
 
      <li>Javier Baraja</li> 
 
      <li>Sambou Yatabaré</li> 
 
      <li>Cédric Barbosa</li> 
 
      <li>Iheb Mbarki</li> 
 
      <li>Barel Mouko</li> 
 
      <li>Maxime Barthelme</li> 
 
      <li>Joey Barton</li> 
 
      <li>Christopher Glombard</li> 
 
      <li>Filippo Lombardi</li> 
 
      <li>Víctor Ibarbo</li> 
 
      <li>Pablo Barrientos</li> 
 
      <li>Andrea Barzagli</li> 
 
      <li>Édgar Barreto</li> 
 
      <li>Willyan Barbosa</li> 
 
      <li>Barreto</li> 
 
      <li>Tranquillo Barnetta</li> 
 
      <li>Philipp Bargfrede</li> 
 
      <li>Anass Achahbar</li> 
 
      <li>Bart Schenkeveld</li> 
 
      <li>Bart van Hintum</li> 
 
      <li>Richard Barroilhet</li> 
 
      <li>Bart Biemans</li> 
 
      <li>Renato Ibarra</li> 
 
      <li>Barry Maguire</li> 
 
      <li>Nicklas Bärkroth</li> 
 
      <li>Modou Barrow</li> 
 
      <li>Hélder Barbosa</li> 
 
      <li>Tó Barbosa</li> 
 
      <li>Diego Barcellos</li> 
 
      <li>Jean Barrientos</li> 
 
      <li>Phil Bardsley</li> 
 
     </ul> 
 
    </div> 
 
    <div> 
 
     <h4>Clubs</h4> 
 
     <ul class="plain"> 
 
      <li>Barnsley</li> 
 
      <li>Barcelona</li> 
 
     </ul> 
 
    </div> 
 
    <div> 
 
     <h4>Articles</h4> 
 
     <ul class="plain articles"> 
 
      <li>Rodgers has faith in youngsters</li> 
 
      <li>Arsenal secure win in Barcelona</li> 
 
      <li>Terry punishment a farce - Barton</li> 
 
      <li>Barton says reputation 'unfair'</li> 
 
      <li>Minnows BATE upset Bayern Munich</li> 
 
      <li>Puyol ruled out of 'El Clasico'</li> 
 
      <li>Hill outraged by penalty decision</li> 
 
      <li>Swindon hit by transfer embargo</li> 
 
      <li>VIDEO: Suarez behaviour embarrassing - Pulis</li> 
 
      <li>Barcelona v Celtic</li> 
 
      <li>Celtic can beat Barca, says Miku</li> 
 
      <li>Barcelona wary of Celtic threat</li> 
 
      <li>Ledley set for his 'biggest game'</li> 
 
      <li>VIDEO: Ferguson to 'deal' with Ferdinand</li> 
 
      <li>Celtic must be bold in Barcelona</li> 
 
      <li>Black footballers' group possible</li> 
 
      <li>AUDIO: Lennon proud of 'magnificent' Celtic</li> 
 
      <li>Barnsley complete Rooney signing</li> 
 
      <li>Celtic shine despite Barca blow</li> 
 
      <li>Lennon blast at critic Schuster</li> 
 
      <li>AUDIO: I am not God, insists Di Canio</li> 
 
     </ul> 
 
    </div> 
 
</div>

ho made a JSFiddle per dimostrare il problema.

Answer 1

Assegna all'elemento padre (nell'esempio, il tag del corpo) e al "risultato" div uno stile CSS di posizione: relativo. (Inoltre, rimuovere la posizione:. Assoluta dal .results CSS)

body, .results { 
    position: relative; 
} 

revised JSFiddle

Nel caso in cui corpo non è l'elemento principale nel tuo caso reale utilizzo, basta un wrapper per le .results div con posizione: relativa.