问题
主要是有相关页面需要适应 ie, 需要打开的页面和在谷歌中显示一致, 主要问题是滚动条的样式问题. 在谷歌内核的浏览器, 使用 CSS 就可以美化滚动条; 但是在 ie 浏览器中, 仍然会使用默认滚动条样式.
解决方法
使用[if IE]
这个方法一般 ie6-ie9 都可以使用
- <style>
- *{box-sizing:border-box;-moz-box-sizing:border-box;
- -webkit-box-sizing:border-box;}
- #dname{width: 500px;height: 100px;margin: auto;background-color: #000;overflow: hidden;}
- .main{width: 500px;height: 100px;overflow-y:scroll;background-color: yellow;}
- </style>
- <!--[if IE]>
- <style>
- .main{background-color: pink;}
- </style>
- <![endif]-->
结果显示, 在 ie 状态下, 背景颜色发生改变. 同理, 滚动条也是相应的. 当 ie 浏览器选择为 ie10 或者是 edge 的时候, 我们写的 [if IE] 就会失效
找了下资料, 显示, ie10 和 edge 对 [if IE] 失效, 可以使用媒体查询对 ie10 进行修改
- <style>
- *{box-sizing:border-box;-moz-box-sizing:border-box;
- -webkit-box-sizing:border-box;}
- #dname{width: 500px;height: 100px;margin: auto;background-color: #000;overflow: hidden;}
- .main{width: 500px;height: 100px;overflow-y:scroll;background-color: yellow;}
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
- .main{background-color: green;}
- }
- </style>
- <!--[if IE]>
- <style>
- #dname{background-color:red;}
- .main{background-color: pink;}
- </style>
- <![endif]-->
重点
1. 条件注释
<!--[if !IE]><!--> 除 IE 外都可识别 <!--<![endif]-->
- <!--[if IE]> 所有的 IE 可识别 <![endif]-->
- <!--[if IE 6]> 仅 IE6 可识别 <![endif]-->
- <!--[if lt IE 6]> IE6 以及 IE6 以下版本可识别 <![endif]-->
- <!--[if gte IE 6]> IE6 以及 IE6 以上版本可识别 <![endif]-->
- <!--[if IE 7]> 仅 IE7 可识别 <![endif]-->
- <!--[if lt IE 7]> IE7 以及 IE7 以下版本可识别 <![endif]-->
- <!--[if gte IE 7]> IE7 以及 IE7 以上版本可识别 <![endif]-->
- <!--[if IE 8]> 仅 IE8 可识别 <![endif]-->
- <!--[if IE 9]> 仅 IE9 可识别 <![endif]-->
判断 IE 版本的 html 语句[if lte IE 9]......[endif] https://blog.csdn.net/u013063153/article/details/52689580
2. 媒体查询 media
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {}
同理, 不管是滚动条还是颜色变化, 都可以让页面在不同浏览器上显示一样.
来源: http://www.qdfuns.com/article/30248/b484c8a74919a535bad33e298fcf6c6d.html