为什么我的多列间距在 Chrome 中不起作用？答案

【问题标题】：Why is my multi-column spacing not working in Chrome?为什么我的多列间距在 Chrome 中不起作用？
【发布时间】：2017-10-06 03:29:12
【问题描述】：

我的 CSS 列在 Chrome 中的显示方式与它们在 Firefox 和 IE9 中的显示方式不同。这是 Firefox 中的正确显示：

这是它在 Chrome 中的错误显示方式：

我尝试将 li 更改为 display: inline-block，这是 Chrome 中的一种改进，但随后较窄的列表项出现在同一个“单元格”中。

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 来演示这个问题。

【问题讨论】：

问题似乎出在包含 results 的 div 上。例如，当我删除绝对位置时，结果与浏览器一致。 jsfiddle.net/B5f7n/1
这很有趣。没想到。
遗憾的是，我认为我不能删除position: absolute，因为该框应该覆盖主页，而不是向下推内容。
您的意思是覆盖主页顶部的表格吗？

标签： css google-chrome css-multicolumn-layout

【解决方案1】：

为父元素（在示例中为 body 标签）和“结果”div 设置 CSS 样式的 position:relative。（另外，从 .results CSS 中删除 position:absolute。）

body, .results {
  position: relative;
}

revised JSFiddle

如果 body 不是您实际用例中的父元素，您只需要一个带有 position:relative 的 .results div 的包装器。

【讨论】：