部分中的浮动li元素在Firefox版本24中分为两行

Question

浏览器测试我的开发网站我遇到了一个问题，主要是在Firefox 24版本上。我已经将li元素设置在100％的全宽度部分内，我有5个浮动的li，其中锚元素设置为20 ％宽度。这些都在大多数浏览器中都存在，除了Firefox 24，它使最后一个元素下拉到下一行。我可以通过减小宽度来解决这个问题，但是它显然没有按预期填充包装纸宽度。我有一个额外的.tablet-half类，它将最后两个元素移动到每个包装器中占用50％的较小尺寸。我不知道这是否会以某种方式影响它？ HTML部分是;

<section class="header-cta wrapper">
<ul>
    <li>
        <a href="/security-systems/" class="cta-box btn--info">
            <img src="http://dev5.bmpreview.co.uk/wp-content/themes/matrix/images/parking.svg" alt="parking icon">
            <p class="cta-box__headline">Parking Barriers</p>
        </a>
    </li>

    <li>
        <a href="/access-control/" class="cta-box btn--trader">
            <img src="http://dev5.bmpreview.co.uk/wp-content/themes/matrix/images/anpr.svg" alt="anpr icon">
            <p class="cta-box__headline">ANPR</p>
        </a>
    </li>

    <li>
        <a href="/security-fencing/" class="cta-box btn--info tablet-half">
            <img src="http://dev5.bmpreview.co.uk/wp-content/themes/matrix/images/security-fencing.svg" alt="security fencing icon">
            <p class="cta-box__headline">Security Fencing</p>
        </a>
    </li>

    <li>
        <a href="/cctv-systems/" class="cta-box btn--trader-dark tablet-half">
            <img src="http://dev5.bmpreview.co.uk/wp-content/themes/matrix/images/cctv.svg" alt="cctv icon">
            <p class="cta-box__headline">CCTV Solutions</p>
        </a>
    </li>
</ul></section>

基本款式; （我使用盒子大小，ul，li没有边距/填充）

.wrapper {
  width: 100%;
  float: left;
 }

.header-cta .cta-box {
 width: 20%;
 padding-right: 0.5rem;
 padding-left: 0.5rem;
}

.tablet-half  {
 width: 50%;
}        

我在手机上拍了一张Firefox 24中的图像

这是我工作的测试网站url，如果有帮助的话。