【原创】抓个Firefox的小辫子，围观群众有：Chrome、Edge、IE8-11

时间 2019-11-06

标签原创 firefox 小辫子围观群众 chrome edge ie8 栏目 Firefox 繁體版

原文原文链接

前言

不少人都知道咱们在作FineUI控件库，在这 9 年多的时间里，在和浏览器无数次的交往中，也发现了多个浏览器自身的BUG，并公开出来方便你们查阅：css

这类BUG之因此被你们所深恶痛绝，在于其隐蔽性，不少时候不能用常规的逻辑去分析。另外一个缘由的开发人员通常都很善良，出现问题老是从自身找缘由，不多会怀疑到IDE，浏览器这些开发工具上面来。html

事实状况是，浏览器也是开发人员开发的，是个软件就有BUG！jquery

今天公开的这个Firefox BUG一直长期存在，最新的 Firefox Quantum 也位列其中，下面就听我详细道来......web

发现问题

昨天一个客户向咱们反馈了一个问题，页面初始时表格未显示，等页面回发后表格才显示出现。奇怪的是，这个问题仅在Firefox下出现，Chrome、IE下是正常的。浏览器

下面是和客户沟通的截图：工具

接到反馈后，咱们当即进行了测试，在Chrome，Edge，IE下页面第一次打开是这样的：布局

可是在Firefox中，页面第一次打开时流程信息分组面板（GroupPanel）中的表格不见了：开发工具

只有在页面回发后，才会显示出来。初步调试能够看出，Firefox下页面第一次加载时表格外部容器的高度不对：测试

分析问题

因为这个问题只在Firefox下出现，其余浏览器Chrome、Edge、IE8-11均显示正常，所以咱们初步判断是Firefox的BUG致使FineUI布局时计算外部容器错误。ui

为了排除这是Firefox 57.0 新版引入的问题，咱们还特地下载了一个老版本：

结果发现，Firefox老版本存在相同的问题，看来这个问题一直存在。

通过一段紧张的排查，咱们终于经过一个简单的HTML页面重现了这个问题：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <style>
        *, :after, :before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <fieldset id="fieldset1" style="border:solid 1px red;width:500px;position:absolute;top:0;left:0;">
        <legend>fieldset</legend>
    </fieldset>

    <script>

        $(function () {
            $('#fieldset1').height(200);
            alert(parseInt($('#fieldset1').height(), 10));
        });

    </script>
</body>
</html>

Firefox下测试：

Chrome下测试：

Edge下测试：

IE11-IE8下测试：

通过对代码的进一步测试发现，这个BUG在Firefox下出现须要知足以下三个条件：

设置CSS全局属性：box-sizing: border-box
HTML标签为：fieldset
fieldset绝对定位：position:absolute

当同时知足这三个条件时，经过JS对 fieldset 标签设置高度后，当即获取高度无效！！！

这个简单的示例中，若是把：

<fieldset id="fieldset1" style="border:solid 1px red;width:500px;position:absolute;top:0;left:0;">
        <legend>fieldset</legend>
</fieldset>

改成：

<div id="fieldset1" style="border:solid 1px red;width:500px;position:absolute;top:0;left:0;">
        
</div>

则Firefox下就不会有问题：

而咱们的 FineUI 的 GroupPanel 控件正是知足了这三个条件，才巧遇了这个Firefox一直存在的BUG：

在FineUI 布局中，因为当前页面是占据整个屏幕的，因此宽度和高度是从外而内设置的。上面图片中经历了这么一个推理过程：

根据页面的高度设置最外层节点的高度
一层一层向内推动，可计算出fieldset的高度为135px
经过JS设置fieldset高度等于135px
此时获取fieldset的高度却不是135px，致使设置表格的外部容器的高度出现误差（9.5px）

解决问题

固然最好的解决办法就是等Firefox更新了，何时修正这个BUG。可是你能期望Firefox何时修正这个问题呢？既然已经存在几年的时间了，颇有可能继续存在下去。

从另外一个角度讲，用老版本Firefox的用户怎么办？问题仍是要解决，不能改变别人，只要拿本身动手了。

在经历了那么多浏览器BUG以后，咱们已经很淡定了，不就是设置节点属性后不更新么，咱们来强制更新一把！

下面的方案能够很好的解决这个问题，而且仅对Firefox进行处理：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <style>
        *, :after, :before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <fieldset id="fieldset1" style="border:solid 1px red;width:500px;position:absolute;top:0;left:0;">
        <legend>fieldset</legend>
    </fieldset>

    <script>

        $(function () {
            $('#fieldset1').height(200);

            
            if (/firefox/i.test(window.navigator.userAgent)) {
                // 强制浏览器从新绘制fieldset节点
                var fieldsetNode = $('#fieldset1');
                fieldsetNode.css('overflow', 'auto');
                fieldsetNode[0].scrollWidth;
                fieldsetNode.css('overflow', 'hidden');
            }
            

            alert(parseInt($('#fieldset1').height(), 10));
        });

    </script>
</body>
</html>

最终效果图

喜欢三石的文章，你就给个推荐呗！

【原创】抓个Firefox的小辫子，围观群众有：Chrome、Edge、IE8-11

前言

发现问题

分析问题

解决问题

点赞