美文网首页react
react项目在IE浏览器上遇到的兼容性问题

react项目在IE浏览器上遇到的兼容性问题

作者: 冰清沧雨 | 来源:发表于2019-04-22 11:34 被阅读0次

    1.针对IE浏览器不兼容remove()方法
    找到该节点的父节点,使用 removeChild()方法去删除
    node.parentNode.removeChild(node)

    2.IE浏览器 position问题
    在使用position: absolute之后,必须带上top|bottom|left|right之中的任意两种

    3.在react的setstate不能控制元素的显隐时,可以直接对dom进行操作

                let bottomHeight = 0
                const top = document.body.scrollTop || document.documentElement.scrollTop
                const bottomId = document.getElementById('BOTTOM')
                if (bottomId) {
                    bottomHeight = bottomId.offsetTop - 485
                    if (top > bottomHeight) {
                        _this.setState({ loadCssFunc: true })
                    }
                    else {
                        _this.setState({ loadCssFunc: false })
                    }
                }
    

    上述是在IE浏览器中很卡顿的,页面一直在setstate

    优化

    直接对dom元素操作

            const totalHeight = document.body.scrollHeight
            const y = document.body.scrollTop || document.documentElement.scrollTop
    
            const rightPart = document.getElementById("right-part")
    
            if (y <= totalHeight - 1005) {
                rightPart.style.visibility = 'visible'
            } else {
                rightPart.style.visibility = 'hidden'
            }
        }
    

    4.在IE浏览器上不支持min-height,和flex:1,支持flex-grow: 1

    相关文章

      网友评论

        本文标题:react项目在IE浏览器上遇到的兼容性问题

        本文链接:https://www.haomeiwen.com/subject/fbsjaftx.html