同一个项目不同浏览器排版不同

134 阅读1分钟

最近在写的一个项目,在谷歌上显示正常,但是在火狐浏览器上排版和字体都显示异常。 一开始以为是兼容性的问题导致,又或者是两个浏览器的视口宽度不同导致的,最后一一排查,发现都不是。

image.png

image.png

最后朋友帮我排查出,是火狐浏览器的滚动条比谷歌的浏览器的滚动条要宽几像素导致空间不足,排版掉下来 。

最后采用了这一段代码,就解决啦,感谢这位好师傅~~~~

var css = '.app-main::-webkit-scrollbar {display: none;}.app-main{scrollbar-width: none !important;}',
head = document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if(style.styleSheet){
style.styleSheet.cssText = css;
}else{
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);