使用列数时元素未显示

Question

我使用列数的css有2列的数据网格。我只是通过说一些数据没有显示来回应用户。它似乎只在Firefox中。

日期在它们不显示的html中？如橙色框中突出显示的那样。

下面是一些示例代码，说明了它……必须使用Firefox

Codepen

> <div class="outer">   <div class="inner">
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Confined Space Rescue</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Enter Confined Space</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Gas Test Atmospheres</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Operate Breathing Apparatus</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Working @ Heights</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb 22 2022 </span>Drivers Licence - Car (New Zealand)</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb 19 2019 </span>Fit Test Report </div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Health and Safety</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>INERT - Inert Entry Technician Course</div>
>     <div class="expiry-status-0"><span class="pull-right ">Nov 12 2020 </span>Offshore Facility Abandonment &amp; Sea Survival</div>
>     <div class="expiry-status-0"><span class="pull-right ">Aug 28 2019 </span>Passport</div>
>     <div class="expiry-status-0"><span class="pull-right ">Nov 12 2020 </span>TBOSIET (Include HUET)</div>
>     <div class="expiry-status-0"><span class="pull-right "></span>Torquing / Tensioning</div>
>     <div class="expiry-status-0"><span class="pull-right "></span>White Card - QLD</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Work in Accordance with an Issued Permit</div>   </div> </div>

如果我没有正确设置问题格式，请原谅我。通过添加Codepen示例，我试图变得更好，但它告诉我也必须包含代码？

Answer 1

看来Firefox在这里做了本不应该做的奇怪的事情。解决该问题的方法是，将跨度定位为绝对值而不是使用浮点数。唯一需要做的就是使容器的位置相对，将其位置更改为绝对位置，并将right和top设置为0px（在这种情况下为正确的填充）。

以下内容应产生相同的结果，并且在FireFox中也可以使用

html {
  font-family: Arial;
}
.outer {
  width: 1000px;
}
.inner {
   column-count: 2
}
div.inner div {
	border-bottom: solid 1px #ccc;
	padding: 6px 15px 6px 0;
  position:relative;
}

.pull-right {
  position:absolute;
  right:15px;
  top:6px;
}

<div class="outer">
  <div class="inner">
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Confined Space Rescue</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Enter Confined Space</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Gas Test Atmospheres</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Operate Breathing Apparatus</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Working @ Heights</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb 22 2022 </span>Drivers Licence - Car (New Zealand)</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb 19 2019 </span>Fit Test Report </div>
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Health and Safety</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>INERT - Inert Entry Technician Course</div>
    <div class="expiry-status-0"><span class="pull-right ">Nov 12 2020 </span>Offshore Facility Abandonment &amp; Sea Survival</div>
    <div class="expiry-status-0"><span class="pull-right ">Aug 28 2019 </span>Passport</div>
    <div class="expiry-status-0"><span class="pull-right ">Nov 12 2020 </span>TBOSIET (Include HUET)</div>
    <div class="expiry-status-0"><span class="pull-right "></span>Torquing / Tensioning</div>
    <div class="expiry-status-0"><span class="pull-right "></span>White Card - QLD</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Work in Accordance with an Issued Permit</div>
  </div>
</div>