内联块和列的 Chrome 52 CSS 问题

Question

更新到 Chrome 52 后，我正在处理的网站错误地呈现列。我使用display: inline-block 'hack' 来强制分栏/强制文本流。它曾经在最新的浏览器（Chrome、Firefox、IE 11）中运行良好，但从 Chrome 52 开始停止运行。版本 51 运行良好。

FF 和 IE 很好地拆分了列，Chrome 52 只显示 1 列。

我尝试使用display: table;，但没有成功。

.text-2-col {
  -ms-column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  font-size: 1.3rem;
}

.text-2-col .column {
  display: inline-block; 
  width: 100%;
}

<div class="text-2-col" style="font-size: 1.4rem;">
  <span class="column"><b>Where we went, what we did:</b>
  <br>
  <b>1.day</b>
  <br>
  <ul>
    <li>Took a ride from Keflavik airport through Akranes around Akrafjall to our accomodation in the north.&nbsp;</li>
    <li>On the way we stopped by at the Kolugljúfur waterfall and Pingeyrar chuch. Around 11 p.m., during our 'night' hike, we saw an artic fox behind our house.</li>
  </ul>
  <b>2.day</b>
  <br>
  <ul>
    <li>Took a ride around the Siglufjörður, a small fishing town on the northern coast, where we had a quick stop, and then through the second largest city in Iceland - Akureyri</li>
    <li>We visited Glaumbær &nbsp;- Skagafjörður Folk Museum and had a cake and a cup of coffee in a lovely cafe in a traditional house nearby.</li>
    <li>Then we went to see the Goðafoss, one of the most spectacular waterfalls in Iceland.</li>
  </ul>
  </span>
  <span class="column"><b>3.day</b>
  <br>
  <ul>
    <li>ay of whales and puffins! Early in the morning we went to Husavik and took a boat to observe the whales and puffins. I saw the tail and white belly of a whale and bunch of puffins. Our boat-guide told us not to eat any whale or puffin, because of the quickly decreasing number of whales living in the ocean around Iceland, and I agreed. Nice guy, I thought.</li>
  </ul>
  <ul>
    <li>Later that day we hiked Krafla vulcano and saw a nice Viti Crater along the way. But the highlight of the day came only in the evening -- bathing in Mývatn Nature Baths -- eutrophic lake situated in an area of active volcano activity. That was the best time on Iceland for me. Steaming natural water, fresh air, bathing till late at night. What could be better?</li>
  </ul>
  <b>4.day</b>
  <br>
  <ul>
    <li>Day of lava! Went to the Leirhnjukur Lava Fields and Hverir steam fields. There was a collection of steam fumaroles, some bubbling mud pots and lots of interesting colours.</li>
    <li>Took a ride to the east - our next accomodation at Gíslastaðir awaits.</li>
  </ul>
  </span>
</div>

相关CodePen：http://codepen.io/anon/pen/wWkWgp

Answer 1

我知道这是一个较老的问题，但我遇到了类似的问题，并且想使用 column-rule，因此不能选择使用 flex。 我目前的解决方案是使用 webkit 的媒体查询：

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .text-2-col .column {
    display: block; 
    -webkit-column-break-inside: avoid;      
  }
} 

我已经更新了代码笔：https://codepen.io/anon/pen/yoyWVW

Answer 2

我今天遇到了这个问题，为了解决这个问题，我最终将列包装在一个块元素中，这样：

.text-2-col {
  -ms-column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  font-size: 1.3rem;
}

.text-2-col .column {
  display: inline-block; 
  width: 100%;
}
<div class="text-2-col" style="font-size: 1.4rem;">
  <span class="column">{...}</span>
  <span class="column">{...}</span>
</div>

变成

.text-2-col {
  -ms-column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  font-size: 1.3rem;
}

.text-2-col .column {
  display: inline-block; 
  width: 100%;
}
<div class="text-2-col" style="font-size: 1.4rem;">
  <div class="column-container">
    <span class="column">{...}</span>
  </div>
  <div class="column-container">
    <span class="column">{...}</span>
  </div>
</div>

它确实解决了我在最新 Chrome 和 FF 中测试的问题。

Answer 3

您可以删除：

.text-2-col .column {
  display: inline-block; 
  width: 100%;
}

它按预期工作。

.text-2-col {
  -ms-column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  font-size: 1.3rem;
}

<div class="text-2-col" style="font-size: 1.4rem;">
  <span class="column">
<b>
  Where we went, what we did:
 </b>
 <br>
<b>
  1.day
 </b>
 <br>
<ul>
<li>
   Took a ride from Keflavik airport through Akranes around Akrafjall to our accomodation in the north.&nbsp;
  </li>
<li>
  On the way we stopped by at the Kolugljúfur waterfall and Pingeyrar chuch. Around 11 p.m., during our 'night' hike, we saw an artic fox behind our house.
  </li>
</ul>
<b>
  2.day
 </b>
 <br>
<ul>
<li>
   Took a ride around the Siglufjörður, a small fishing town on the northern coast, where we had a quick stop, and then through the second largest city in Iceland - Akureyri
  </li>
<li>
   We visited Glaumbær &nbsp;- Skagafjörður Folk Museum and had a cake and a cup of coffee in a lovely cafe in a traditional house nearby.
  </li>
<li>
   Then we went to see the Goðafoss, one of the most spectacular waterfalls in Iceland.
  </li>
</ul>
</span>



  <span class="column">
<b>
  3.day
 </b>
 <br>
<ul>
<li>
   Day of whales and puffins! Early in the morning we went to Husavik and took a boat to observe the whales and puffins. I saw the tail and white belly of a whale and bunch of puffins. Our boat-guide told us not to eat any whale or puffin, because of the quickly decreasing number of whales living in the ocean around Iceland, and I agreed. Nice guy, I thought.
  </li>
</ul>
<ul>
<li>
   Later that day we hiked Krafla vulcano and saw a nice Viti Crater along the way. But the highlight of the day came only in the evening -- bathing in Mývatn Nature Baths -- eutrophic lake situated in an area of active volcano activity. That was the best time on Iceland for me. Steaming natural water, fresh air, bathing till late at night. What could be better?
  </li>
</ul>
<b>4.day</b>
 <br>
<ul>
<li>Day of lava! Went to the Leirhnjukur Lava Fields and Hverir steam fields. There was a collection of steam fumaroles, some bubbling mud pots and lots of interesting colours.</li>
<li>Took a ride to the east - our next accomodation at Gíslastaðir awaits.</li>
</ul>
</span>
</div>

---

或者，您可以使用flexbox。

.text-2-col {
  font-size: 1.3rem;
  display: flex;
}
.text-2-col .column {
  flex: 1;
}

<div class="text-2-col" style="font-size: 1.4rem;">
  <span class="column">
<b>
  Where we went, what we did:
 </b>
 <br>
<b>
  1.day
 </b>
 <br>
<ul>
<li>
   Took a ride from Keflavik airport through Akranes around Akrafjall to our accomodation in the north.&nbsp;
  </li>
<li>
  On the way we stopped by at the Kolugljúfur waterfall and Pingeyrar chuch. Around 11 p.m., during our 'night' hike, we saw an artic fox behind our house.
  </li>
</ul>
<b>
  2.day
 </b>
 <br>
<ul>
<li>
   Took a ride around the Siglufjörður, a small fishing town on the northern coast, where we had a quick stop, and then through the second largest city in Iceland - Akureyri
  </li>
<li>
   We visited Glaumbær &nbsp;- Skagafjörður Folk Museum and had a cake and a cup of coffee in a lovely cafe in a traditional house nearby.
  </li>
<li>
   Then we went to see the Goðafoss, one of the most spectacular waterfalls in Iceland.
  </li>
</ul>
</span>



  <span class="column">
<b>
  3.day
 </b>
 <br>
<ul>
<li>
   Day of whales and puffins! Early in the morning we went to Husavik and took a boat to observe the whales and puffins. I saw the tail and white belly of a whale and bunch of puffins. Our boat-guide told us not to eat any whale or puffin, because of the quickly decreasing number of whales living in the ocean around Iceland, and I agreed. Nice guy, I thought.
  </li>
</ul>
<ul>
<li>
   Later that day we hiked Krafla vulcano and saw a nice Viti Crater along the way. But the highlight of the day came only in the evening -- bathing in Mývatn Nature Baths -- eutrophic lake situated in an area of active volcano activity. That was the best time on Iceland for me. Steaming natural water, fresh air, bathing till late at night. What could be better?
  </li>
</ul>
<b>4.day</b>
 <br>
<ul>
<li>Day of lava! Went to the Leirhnjukur Lava Fields and Hverir steam fields. There was a collection of steam fumaroles, some bubbling mud pots and lots of interesting colours.</li>
<li>Took a ride to the east - our next accomodation at Gíslastaðir awaits.</li>
</ul>
</span>
</div>