react

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

2019-04-22  本文已影响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

上一篇下一篇

猜你喜欢

热点阅读