複数の列の間隔がChromeで機能しないのはなぜですか？

Question

私のCSSの列は、FirefoxとIE9でどのように表示されているかとはChromeの表示方法が異なります。これは、Firefoxで正しく表示され：

は、ここでは、Chromeで正しく表示されない方法は次のとおりです。

私は一種の改善である、display: inline-blockにliを変更しようとしましたしかし、狭いリストアイテムは同じ「セル」に表示されます。

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>

私はこの問題を示すためにmade a JSFiddleをしました。

Answer 1

親要素（この例ではbodyタグ）と "results" divの両方にposition：relativeのCSSスタイルを指定します。 （また、位置削除します。.resultsのCSSから絶対）をケース本体には

body, .results { 
    position: relative; 
} 

revised JSFiddle

あなたの本当のユースケースでは、親要素ではない、あなただけの.resultsのラッパーが必要div with position：相対。