CSS小笔记

隐藏滚动条的css样式和IE11的一个flex渲染兼容问题

由 漆黑菌 于 2018年08月22日 发布

隐藏滚动条但是可以滚动

chrome,IE11,edge下无问题,Firefox下滚动条隐藏且无效果,形同overflow:hidden,目前靠谱解决方案是用js模拟……

    .overflowHide {
        overflow: scroll;
        /*隐藏滚动条,当IE下溢出,仍然可以滚动*/
        -ms-overflow-style: none;
        /*火狐下隐藏滚动条*/
        overflow: -moz-scrollbars-none;
    }
    
    /*chrome下隐藏滚动条*/
    .overflowHide::-webkit-scrollbar {
        display: none;
    }

IE11flex兼容性问题

在IE11和早期版本的Firefox中,:after和:before伪元素绝对定位后不会依然会参与flex子元素运算,IE10,edge和新版本Firefox无此问题,可以尝试通过order属性排列元素隐藏此问题。

伪元素参与渲染,after在最后,提示元素被挤到中间

使用默认设置order均为0,伪元素参与渲染,after在最后,提示元素被挤到中间。

给提示元素添加order:1权重,排列到最后,伪元素占据中间位置,但是因为是绝对定位显示依然出现在最前端。

给提示元素添加order:1权重,排列到最后,伪元素占据中间位置,但是因为是绝对定位显示依然出现在最前端,IE11显示效果达成。