Tại sao khoảng cách nhiều cột của tôi không hoạt động trong Chrome?

Question

Cột CSS của tôi hiển thị khác nhau trong Chrome từ cách chúng hiển thị trong Firefox và IE9. Đây là màn hình hiển thị đúng trong Firefox:

Sau đây là cách nó sẽ hiển thị không đúng trong Chrome:

Tôi đã cố gắng thay đổi li-display: inline-block, đó là một sự cải tiến của các loại trong Chrome, nhưng sau đó các mục danh sách hẹp hơn xuất hiện trong cùng một ô "".

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>

Tôi đã made a JSFiddle để chứng minh vấn đề.

Answer 1

Cung cấp cả phần tử gốc (trong ví dụ, đó là thẻ body) và "kết quả" div một kiểu CSS của vị trí: tương đối. (Ngoài ra, loại bỏ các vị trí:. Tuyệt đối từ .results CSS)

body, .results { 
    position: relative; 
} 

revised JSFiddle

Trong trường hợp cơ thể không phải là yếu tố phụ huynh trong trường hợp sử dụng thực tế của bạn, bạn chỉ cần một wrapper cho .results div với vị trí: relative.