Dlaczego mój odstęp między wieloma kolumnami nie działa w przeglądarce Chrome?

Question

Moje kolumny CSS wyświetlają się inaczej w Chrome, niż wyświetlają się w Firefoksie i IE9. Jest to poprawne wyświetlanie Firefox:

Oto jak to wyświetla niepoprawnie w Chrome:

Próbowałem zmieniając li do display: inline-block, co stanowi poprawę rodzaju w Chrome, ale węższe elementy listy pojawiają się w tej samej "komórce".

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>

mam made a JSFiddle do wykazania problem.

Answer 1

Podaj zarówno element nadrzędny (w przykładzie jest to znacznik body), jak i "wyniki" dzielą styl CSS pozycji: względny. (Również usunąć pozycję. Absolutny z CSS .results)

body, .results { 
    position: relative; 
} 

revised JSFiddle

W przypadku organizm nie jest elementem dominującym w normalnym przypadku użycia, wystarczy otoki dla .results div z pozycją: względną.