为什么段落文本在默认的 CSS3 多栏网站布局中没有正确对齐？

Question

以下简单的纯文本段落在默认 CSS3 多栏网站布局中未正确对齐的原因可能是什么？请参阅 (A) 了解第 1 列中缺失的第一行，并查看 (B) 了解未对齐，其中该行的基线明显与第二列的基线不完全相同！

article {
-webkit-column-count: 3;
   -moz-column-count: 3;
        column-count: 3;

-webkit-column-gap: 12px;
   -moz-column-gap: 12px;
        column-gap: 12px;
}

<article>
<p>Een was 17 graden onder nul één ideëen toen het ijs onder onze benen begon te kraken. Al miljoenen jaren leven dieren in harmonie zonder maar ook een druppel aardolie of een aardgas tot zich aan te wenden. Recentelijk is de focus van fossiele naar alternatieve energiebronnen verschoven. Giftige lithium batterijen en zonnepanelen die devoorraad fosfor in hoog tempo uitputten. Over een decennium hebben we weer andere problemen. Als innovator en bouwkundig ingenieur stel ik iets heel anders voor: het niet terugbrengen van onze energiebehoefte altgether. Verwarmen en koelen kan ook op manieren dat het geen enkele energie meer nodig is. Een experiment in hoeverre dit mogelijk is vergt het uiterste van twee natuurlijke processen: isolatie en ventilatie. Op de meeste plaatsen in de wereld is de warmte van de zon en de inwendige warmteproductie (van elektrische apparaten) onvoldoende om het hele jaar door in de leefruimtes een aangename binnentemperatuur te bereiken: er is verwarming nodig. Indien de binnentemperatuur hoger is dan de buitentemperatuur ontstaat volgens de wetten van Fourier energietransport door de schil van een gebouw (muur, dak, vloer). Om de temperatuur constant te houden, moet de verloren gegane energie weer toegevoegd worden. In een (ongeïsoleerde) doorsnee woning gaat 75% van het totale energieverbruik rechtstreeks naar verwarmen. De belangrijkste reden om goed te isoleren is energiebesparing en comfortverhoging. Het binnenoppervlak van een geïsoleerde woning voelt warmer aan dan dat van een ongeïsoleerde woning. Deze hogere temperatuur zorgt voor extra stralingswarmte. Ook condenseert waterdamp minder snel op een warm oppervlak. De vacht of het verenkleed van dieren dient hetzelfde doel. De waterdamp migreert dan door de wand en de isolatie, om daarin te condenseren. Om die condensatie te voorkomen wordt dampdichte folie aangebracht, die de migratie van verse lucht ook belemmert, waardoor warmteverliezende ventilatieroosters moeten worden toegepast.</p>
</article>

Answer 1

你试过了吗：

article p {
    margin: 0;
}

有效 here in a fiddle。在 Chrome 和 FF.

中测试

找不到没有上述修复的原因它在 FF 中显示错误，但在 Chrome 默认

样式是：

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

为什么段落文本在默认的 CSS3 多栏网站布局中没有正确对齐？

Why paragraph text doesn't align properly in a default CSS3 multicolumn website layout?

css

multiple-columns

vertical-alignment

text-alignment

baseline