关于【IE兼容】的都在这

滚动条

ie的滚动条覆盖了内容,为了触屏操作优化浏览器的内容显示,IE 浏览器提供了一种可以浮动显示,自动隐藏的滚动条样式,但是这个样式会在某些情况下造成一些困扰,比如下图。。。

关于【IE兼容】的都在这

其实默认情况下,桌面版的 IE 应该是传统的滚动条样式;而在应用版的 IE 中,滚动条默认才是浮动显示,自动隐藏。

但是可能会发现,一些使用了 bootstrap 样式的网站,也会出现相同这种情况,后来了解了下是因为bootstrap设置了一个属性

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

如果想更改滚动条的样式,可以为 IE 浏览器强制设置一个样式:

html, body {
-ms-overflow-style: scrollbar;
}

在IE8实现background-size

@media screen and (min-width:0px){
/*非IE8的部分*/
.main{
background:url('../../images/cloud/icon_map.png') no-repeat;
background-size:auto 100%;
background-position:center;
}
}
.main{
  /*IE8的部分*/
width:40px\9;//ie hack
height:40px\9;
margin-right:25px\9;   /*默认的填充满,相当于background-size:100% 100%;*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../../images/cloud/icon_map.png',
sizingMethod='scale');
}

IE hack

1.ie8及以下不支持media query,可以运用此方法进行hack

2.搬运:hack大全

    关于ie8的hack


IE8 link&script

写在前面:因为IE8是一个奇葩版本,所以他和5-7,9-edge显得与众不同,所以总结出一下几点来解决IE8的兼容性

CSS

<!-- ie8及以下 -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="<@path/>/css/cloud/home.css">
<link rel="stylesheet" href="<@path/>/css/cloud/major.css">
<![endif]-->

JS

<!--[if lt IE 9]>
<script type="text/javascript" src="<@path/>/assets/js/selectivizr.js"></script>
< ![endif]-->
<!--[if lt IE 9]>
<script type='text/javascript' src="<@path/>/assets/js/html5shiv.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type='text/javascript' src="<@path/>/assets/js/respond.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type='text/javascript' src="<@path/>/assets/js/excanvas.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type='text/javascript' src="<@path/>/assets/js/css3-mediaqueries.js"></script>
<![endif]-->

上一篇:java 生产者 与 消费者的案例


下一篇:org.springframework.web.context.ContextLoaderListener 解决办法