关于IE8兼容的一些问题

来源：互联网发布：php短信验证码代码编辑：程序博客网时间：2024/05/18 01:51

一.opacity在ie8中写会整个透明。

opacity:0.7;       //ie8++filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);  //ie6——ie8

二.渐变色

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9,endColorstr=#A9A9A9)//是IE的渐变滤镜filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);

三.placehold在ie8中会消失，添加一段脚本就可以了。

if (!('placeholder' in document.createElement('input'))) {                $('[placeholder]').each(function () {                    var $tag = $(this); //当前 input                      var $copy = $tag.clone();   //当前 input 的复制                      if ($copy.val() == "") {                        $copy.css("color", "#999");                        $copy.val($copy.attr('placeholder'));                    }                    $copy.focus(function () {                        if (this.value == $copy.attr('placeholder')) {                            this.value = '';                            this.style.color = '#000';                        }                    });                    $copy.blur(function () {                        if (this.value == "") {                            this.value = $copy.attr('placeholder');                            $tag.val("");                            this.style.color = '#999';                        } else {                            $tag.val(this.value);                        }                    });                    $tag.hide().after($copy.show());    //当前 input 隐藏 ，具有 placeholder 功能js的input显示                  });            }

四.使用meta标签来强制IE8使用最新的内核渲

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta http-equiv="X-UA-Compatible" content="IE=9" />

五.IE8似乎无法识别Media Query，所以需要hack一下啦！推荐采用redpond.js,如果你在前端代码中使用了HTML5的新标签（nav/footer等），那么在IE中这些标签可能无法正常显示。我使用html5shiv,可以用本地，也可以用sdn提供的。

<!--[if lt IE 9]>    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    <link href="css/oldClient8.css" rel="stylesheet">    <![endif]-->

ps:其中链接的css样式表示，在ie8下样式的链接。

六、background-size: cover；如果你想使用background-size: cover设置全屏背景，很遗憾IE8办不到...但可以使用IE独有的AlphaImageLoader滤镜来实现，添加一条如下的CSS样式：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)

将sizingMethod设置为scale就OK了。

还没完，如果你在此背景之上放置了链接，那这个链接是无法点击的。一般情况下的解决办法是为链接或按钮添加position:relative使其相对浮动。

0 0