Question

最近我很难使用firefox（最新的56.0.2），这似乎不能容忍子像素渲染（它似乎以自己的方式管理分数像素）。

例如，如果我有，让我们说，7个标签浮动在一个包含div中，我为这些标签中的每一个应用宽度等于“containerDiv / 7”像素，这将在Chrome，Safari，Opera上无缝地工作（我测试过的那些标签将水平排列，而在Firefox中，最后一个标签会在调整窗口大小时闪烁并上下移动。当调整大小结束时，它可能会排列或不排列，具体取决于它舍入像素值的方式。

我进行了一些研究，看起来所有浏览器在管理屏幕上的像素时都不会以相同的方式处理小数。

当然，这可以用CSS和百分比来处理，但是当你的某些元素有边框而其他元素没有边框时，这就变得很困难了。

所以，我测试了一个小的jquery脚本来解决这个问题：

function testWidth(){
    var containingDivWidth= $('#containingDiv').width();
    var numBorders = 6;
    var numItems   = 7;
    var totalWidth = containingDivWidth - numBorders;       
    var itemWidth  = (Math.round(totalWidth/numItems))      
    var remainder  = totalWidth - (itemWidth*numItems);

    $('.tab').css('width',itemWidth+'px');
    $('.tab:nth-child(7)').css('width',itemWidth+remainder+'px');
};

$(document).ready(function()      {testWidth();});  
window.onresize = function(event) {testWidth();};

当然，这不是最佳选择，但很容易阅读。

这是html，以防万一

<div id="containingDiv">
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
</div>

这是CSS

<style>
    #containingDiv{
        width:100%;
        height:40px;
        background:red;
    }
    .tab{
        float:left;
        height:40px;
        border-right:1px solid black;
        background:green;
    }
    .tab:nth-child(7){
        border-right:none;
    }
</style>

所以，是的，现在它适用于所有浏览器，包括Firefox。 ......当窗口没有调整大小时。

如果窗口调整大小，Firefox会继续像以前一样操作，因为调整大小时最后一个选项卡会上下闪烁。

但是有一点不同：在调整大小结束时，标签将排成一行。我实时检查过，所有标签的总宽度总是等于容器div的宽度，即使在调整大小时也是如此。

因此，在重新调整大小时重新计算标签宽度之前，似乎Firefox需要几分之一秒。

这个假设得到以下事实的支持：只有在水平调整窗口大小而不是向上调整窗口大小时才会出现问题。这似乎表明，在调整大小时，选项卡的总和在几分之一秒内大于包含div，直到计算完成。显然，在调整大小时，包含的div总是会更大，因此不会出现问题。所以这看起来像是一个延迟/延迟问题。

无论如何，我回到原点。子像素渲染无法正常工作和重新计算，而调整大小似乎意味着延迟和这两者，只有Firefox（对抗Chrome，Safari和Mac上的Opera，在这两种情况下表现都很好）。

我该怎么办？

注1：我可以使用表格，但这个例子只是一个例子，因为当我需要这种无法用表处理的计算时，有多个实例。这不是我第一次在各种情况下遇到这个问题。这只是将问题置于清晰环境中的一个例子。因此，建议像这个示例的表格一样的解决方法特别无济于事。

注意2：但是，如果有办法解决子像素渲染问题，我宁愿不要创建一个函数来防止获得带小数的像素，因为这对于看似微不足道的事情来说是耗时的。其他浏览器（即使“on resize”延迟问题让我感到困惑）。此外，使用这样的功能，其中一个标签将总是比其他标签更大或更窄，这不是一个优雅的解决方案。

谢谢！

Answer 1

对于所有CSS无JavaScript解决方案，请尝试在容器上设置display: flex，并在容器的子容器上设置flex: 1 1 auto。这样可以防止您在Firefox中看到的抖动发生。

设置flex: 1 1 auto让flexbox自动分配弹性行中每个子节点之间的宽度。

要全面了解flexbox，请查看this guide。

＆＃13;

#containingDiv{
        width:100%;
        height:40px;
        background:red;
        display: flex;
    }
  .tab{
      flex: 1 1 auto;
      height:40px;
      border-right:1px solid black;
      background:green;
  }
  .tab:nth-child(7){
      border-right:none;
  }

＆＃13;

<div id="containingDiv">
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
</div>

＆＃13;

使用javascript / jquery

1 个答案: