bootshrap会改变IE浏览器滚动条样式

在某个小网站的开发中
客户一直抱怨在IE11中网页右边滚动条不一样
后来发现在IE11中，有2个页面滚动条会自动隐藏，一开始以为是浏览器默认行为，改了overflow:scroll后也没有用。仔细观察后发现这2个页面因为用了bootshrap的特效而引用了bootshrap.css文件，于是确定是bootshrap.css中的问题。

排查后发现是以下代码导致的。

@-ms-viewport {
width: device-width;
}

在此mark一下，也为出现问题的朋友提供下帮助。

时间： 2024-10-18 08:10:33

bootshrap会改变IE浏览器滚动条样式的相关文章

修改浏览器滚动条样式

滚动条样式修改,没有找到修改火狐浏览器滚动条的代码把以下样式加入css,图片为谷歌.safari.qq浏览器.360浏览器滚动条样式和ie滚动条样式及ie原始默认样式 /*谷歌.safari.qq浏览器.360浏览器滚动条样式*/ /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; height: 10px; background-color: #F5F5F5; } /*定义滚动条轨道内阴影+圆角*/ ::-web

自定义浏览器滚动条样式

为了有助于理解IE中滚动条样式的控制,你可以查看如下的图片: 经过不断的测试发现,在Win8 下面,有一部分样式都起着相同的作用.估计是因为在Win8中扁平化的界面设计而重新定议了系统中滚动条!以下是Win 8下面的滚动条样式,并写出了和CSS支持的情况: 以上所写的几个四个CSS属性,足以控制Win 8系统下,IE浏览器的滚动条样式了.但经过测试,发现,其它的四个属性仍然支持(主要是在以上几个属性空缺时,就会体现其作用).具体如下: 关于scrollbar-track-color,scroll

设置浏览器滚动条样式

1.设置隐藏滚动条 ::-webkit-scrollbar{ display:none; } 2.设置滚动条样式 /*********改变浏览器滚动条的样式****************/::-webkit-scrollbar/*整体部分*/{width: 10px; height:10px; }::-webkit-scrollbar-track/*滑动轨道*/{ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius:

css改变谷歌浏览器的滚动条样式

/*---滚动条默认显示样式--*/ ::-webkit-scrollbar-thumb{ height:50px; outline-offset:-2px; outline:2px solid #fff; -webkit-border-radius:4px; border: 2px solid #fff; } /*---鼠标点击滚动条显示样式--*/ ::-webkit-scrollbar-thumb:hover{ height:50px; -webkit-border-radius:4px;

浏览器滚动条样式更改

/* webkit内核浏览器 */ ::-webkit-scrollbar {width: 8px;} ::-webkit-scrollbar-button {width: 8px;height: 5px;} ::-webkit-scrollbar-track { border-radius: 0px;} ::-webkit-scrollbar-thumb {background: #999;border-radius: 0px;} ::-webkit-scrollbar-thumb:hover

浏览器滚动条样式表-参考喜马拉雅

*,::after,::before { -webkit-box-sizing: border-box; box-sizing: border-box} ::-webkit-scrollbar { width: 8px; background-color: #c1787800; border-radius: 100px;} ::-webkit-scrollbar:hover { background-color: rgba(0,0,0,.09)} ::-webkit-scrollbar:hori

自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chrome适用,也就是说这个用的是Chrome的私有CSS属性.便百之谷之后,发现原来不仅仅只用Chrome,其它的浏览器在不同程度上支持自定义滚动条样式的.下面是我不断测试的结果,若有错误或不全,请在评论里面给出,我会立马更正:若有更好的方案,你可以留言,让大家都开开眼界...... 自定义IE浏

如何修改浏览器默认滚动条样式

/*浏览器滚动条样式*/ /* width */ ::-webkit-scrollbar { width: 4px; height: 4px; } /* Track */ ::-webkit-scrollbar-track { background: rgb(255, 255, 255); border-radius: 8px; } /* Handle */ ::-webkit-scrollbar-thumb { background: rgb(201, 201, 202); border-ra

JavaScript自定义浏览器滚动条兼容IE、火狐和chrome

今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css只能是改变IE浏览器的颜色,而且CSS不能做到改变火狐浏览器的样式和颜色.所以只能是通过JavaScript来实现了.也有插件可以做到.我分享一下我自己使用原生JavaScript实现的思路.先上个图看下效果: JavaScript实现的思路就是模拟浏览器自身滚动条.我制作的思路是先将整个文档放在一