为什么我的多列间距在Chrome中不起作用？ [英] Why is my multi-column spacing not working in Chrome?
本文介绍了为什么我的多列间距在Chrome中不起作用？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的CSS列在Chrome和Firefox9和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;背景颜色：白色; border：3px solid #CCCCCC;余量：2.7em;填充：0 1em;位置：绝对;右：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;列数：6; column-gap：1em;}。results ul.articles {-moz-column-count：3; -moz-column-gap：1em; -webkit-column-count：3; -webkit-column-gap：1em;列数：3; column-gap：1em;}
< div class = 结果 > < h3>搜索结果< / h3> < DIV> < H4>播放器和LT; / H4> < ul class =plain> < li> Barry Bannan< / li> < li> Gareth Barry< / li> < li> Leon Barnett< / li> < li>凯尔巴特利< / li> < li> Barry Ferguson< / li> < li> Ashley Barnes< / li> < li>马文巴特利< / li> < li> Shaun Barker< / li> < li> Arran Lee-Barrett< / li> < li>泰隆巴尼特< / li> < li> Ross Barkley< / li> < li>罗纳德祖巴尔< / 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ñatEtxebarria< / li> < li> Wakaso Mubarak< / li> < li> Abdel Barrada< / li> < li>JoséBarkero< / li> < li> AntonioBarragán< / li> < li> Javier Baraja< / li> < li> SambouYatabaré< / li> < li>CédricBarbosa< / 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íctorIbarbo< / li> < li> Pablo Barrientos< / li> < li> Andrea Barzagli< / li> < li>埃德加巴雷托< / li> < li> Willyan Barbosa< / 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> NicklasBärkroth< / li> < li> Modou Barrow< / li> < li>HélderBarbosa< / li> < li>TóBarbosa< / li> < li> Diego Barcellos< / li> < li> Jean Barrientos< / li> < li> Phil Bardsley< / li> < / UL> < / DIV> < DIV> < H4>群组和LT; / H4> < ul class =plain> <李>巴恩斯利< /锂> <李>巴塞罗那< /锂> < / UL> < / DIV> < DIV> < H4>文章和LT; / H4> < ul class =纯文章> < li>罗杰斯对年轻人有信心< / li> < li>阿森纳在巴塞罗那赢得胜利< / li> < li>特里惩罚闹剧 - 巴顿< / li> < li>巴顿说声望'不公平'< / li> < li> Minnows BATE不满拜仁慕尼黑< / li> < li>普约尔排除了'El Clasico'< / li> < li> Hill受到处罚决定的愤慨< / li> < li> Swindon遭转运禁运击中< / li> < li>视频：苏亚雷斯行为令人尴尬 - Pulis< / li> < li> Barcelona v Celtic< / li> < / li>< li>凯尔特人可以击败巴萨，Miku< / li> < li>巴塞罗那警惕凯尔特威胁< / li> < li> Ledley为他的最大游戏设定< / li> < li>视频：弗格森与费迪南德交易< / li> < li>凯尔特人在巴塞罗那必须大胆< / li> < li>黑色足球运动员组可能< / li> < li> AUDIO：列侬自豪于'宏伟的'凯尔特< / li> < li>巴恩斯利完成鲁尼签署< / li> < li>凯尔特人尽管受到Barca打击而大放光彩< / li> < li> Lennon在评论家舒斯特爆料< / li> < li>音频：我不是上帝，坚持Di Canio< / li> < / UL> < / div>< / div>
制作了一个JSFiddle 来演示这个问题。
解决方案
给出父元素（在本例中，它是body标签）和结果div CSS样式的位置：相对。 （另外，从.results CSS中删除position：absolute。）
body，.results {
position：相对的;
}
如果body不是实际用例中的父元素，则只需要一个包装器.results div的位置是：relative。
My CSS columns are displaying differently in Chrome from how they're displaying in Firefox and IE9. This is the correct display in Firefox:
Here's how it displays incorrectly in Chrome:
I've tried changing the li to display: inline-block, which is an improvement of sorts in Chrome, but then the narrower list items appear in the same "cell".
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>
I've made a JSFiddle to demonstrate the problem.
解决方案
Give both the parent element (in the example, it's the body tag) and the "results" div a CSS style of position: relative. (Also, remove the position:absolute from the .results CSS.)
body, .results {
position: relative;
}
In case body is not the parent element in your real use case, you just need a wrapper for the .results div with position:relative.
这篇关于为什么我的多列间距在Chrome中不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
