IE8兼容性问题

最新推荐文章于 2021-03-31 11:58:45 发布
最新推荐文章于 2021-03-31 11:58:45 发布
阅读量5.6k 收藏 10
点赞数 2
分类专栏： 浏览器兼容 JavaScript html/html5 css 文章标签： ie 8 兼容性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wx11408115/article/details/64122674
版权
JavaScript 同时被 3 个专栏收录
15 篇文章 0 订阅
订阅专栏
html/html5
13 篇文章 0 订阅
订阅专栏
css
11 篇文章 0 订阅
订阅专栏

IE8兼容性问题

1. select输入框中下拉按钮不能顶到下边框

html

    <div class="div-one">
        <span>有上下padding</span>
        <select class='select-one'>
            <option>下拉菜单1</option>
            <option>下拉菜单2</option>
            <option>下拉菜单3</option>
        </select><br>
        <span>无上下padding</span>
        <select  class='select-two'>
            <option>下拉菜单1</option>
            <option>下拉菜单2</option>
            <option>下拉菜单3</option>
        </select>
    </div>

css

.div-one {
    width: 600px;
    height: 100px;
}
.div-one select{    
    width: 200px;
    height: 40px;
    margin: 0 10px;

    /*IE的盒子模型*/
}
.div-one .select-one {
    padding: 10px;
    border: 1px solid red;
    margin-bottom: 10px; 
}

2. IE不支持border-radius: 圆角

html

<div class="div-two">
        <div class="circle-one"></div>
        <div class="circle-two"></div>
    </div>

css

div[class^='circle'] { 
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-left: 20px;
    border: solid 1px red;
    behavior: url(./PIE.htc);/*支持IE8圆角  不行就加position:relative; 再不行就加z-index: 10*/
    border-radius: 50px;
    display: inline-block;
}
.circle-two {
    background: url(../images/circle.jpg);
}

3. margin-top失效

//当时加一个1px的px就可以了。不解
        <!--[if IE 8]>
            <p style="height:1px;display: inline-block;"></p>;
        <![endif]-->

<div class='div-three'>
        <a href="http://blog.csdn.net/zhu1988renhui/article/details/7795923" target="_blank">参考</a>
        <div class='margin-one'></div>
        <div class="margin-two"></div>
        <div class="margin-three"></div>
    </div>
/*margin 失效*/
.div-three {
    width: 200px;
    height: auto;
    margin: 20px;
}
.div-three .margin-one,
.div-three .margin-two{
    width: 50px;
    height: 50px;
    float: left;
    margin: 5px
}
.div-three .margin-three {
    width: 110px;
    height: 50px;
    margin: 5px 0 0 5px;
    clear: both;
    background: #50C66C;
}
.div-three .margin-one { background: #51718E;}
.div-three .margin-two { background: #8E518A;}

4. 莫名其妙的多出横线 原因: border导致， 处理：清border

5. 输入框不显示默认文字 原因: IE8不支持placeholder

<p>方法一：对input加onfocus和onblur事件, 进页面时，还是没有···(再给input加个value就可以啦~~)</p>
        <input type="" name="" onblur="if (this.value == '') {this.value = '方法一';}"
        onfocus="if (this.value == '方法一') {this.value = '';}" value="方法一">
        <p>方法二：引用placeholder.js插件,再加
            <pre>
                <code>
                $(function() {
                    $('input, textarea').placeholder();
                });
                </code>
            </pre>
        </p>
        <input type="" name="" placeholder="方法二">
        <p>总结: 
            <ul>
                <li>方法一在onfous时，值就消失了，placeholer应该是在输入值时，原始值才会消失</li>
                <li>方法二只要加个插件，和那句js，就不用担心有多个input中的placeholer</li>
            </ul>
        </p>

6. IE8不支持a标签里面有button、input等元素的跳转

<div>
        <a href="http://www.wifiuncle.com" target="_blank">
            <button onclick="window.location=this.parentNode.href;">点击按钮</button>
        </a>
        <a href="http://www.wifiuncle.com"><input type="button" value="Submit" class="button" /></a>
        <p>
            方法: 
            <ul>
                <li>1. 给button加 <code>onclick="window.location=this.parentNode.href;"</code></li>   
                <li>2. 参考<a href="http://stackoverflow.com/questions/2949910/how-to-make-href-will-work-on-button-in-ie8" >Stack Overflow</a>
                <pre>
                    <code>
                    $('input.button').click(function(){
                        document.location = $(this).parents('a').first().prop('href');
                    });
                    </code>
                </pre>
                    </li>
            </ul>
        </p>
    </div>

7. IE8 对str.trim()会报错, 应$.trim(str);

8. a标签中含有img标签就会有蓝色边框

<p>8. a标签中含有img标签就会有蓝色边框  
        <br>原因： ie6,7,8中对具有link属性的img标签会自动添加2px的border。
        <br>方法： img   border: none</p>
    <div class="div-seven">
        <a href="http:www.wifiuncle.com"><img src="./images/circle.jpg"></a>
        <a href="http:www.wifiuncle.com"><img src="./images/circle.jpg" style="border: none\0"></a>
    </div>

9. 上传图片不能预览(本地可以预览，在服务器就不能预览，不解)

参考这个: http://blog.csdn.net/yangzhihello/article/details/23851369

10. IE和FF字体偏小

 <p>原因: chrome不支持12px以下的字体，会自动转成12px.  IE和FF不会自动转换，所以字就显得比较小.    方法: 统一设置字体12px</p>
    <div class="div-ten">
        <span class="one">我是10px</span>
        <span class="two">我是12px</span>
    </div>

11. ie8中变量与id冲突时， 必须用var声明变量否则会报错，firefoxhe chrome则不会。

IE8

    <div class="div-eleven">
        <p id="eleven"> 我的id是eleven</p>
        <img src="./images/varId.png">
    </div>
            var eleven；
            //eleven = $('#eleven').text(); //报错
            var eleven = $('#eleven').text();
            console.log(eleven);

12. flash遮挡住页面中元素

            
                <object>
                    <param name="wmode" value="opaque">
                    <embed  wmode="opaque"></embed>
                </object>

13. IE8 不支持bind this

13. IE8 不支持bind this

<p><a href="http://www.tuicool.com/articles/Mr6nMj7">一行代码轻松搞定各种IE兼容问题</a></p>
<p>加上这句也是蛮好用的 
    <code>
         &lt;meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/&gt;
    </code>
</p>

14. 用jquery-1.7.1.min.js 汉字可能会乱码， 改用jquery-1.9.1.min.js (还是1.8忘记了。。。)（这锅不是IE8的）

IE8运行效果图

这里写图片描述

代码部分

<!DOCTYPE html>
<html>
<head>
    <title>IE8 test</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
     <base target="_blank">
</head>
<body>
    <p>1. select输入框中下拉按钮不能顶到下边框
    解决办法: 去padding 但select中文字不能居中
    </p>
    <div class="div-one">
        <span>有上下padding</span>
        <select class='select-one'>
            <option>下拉菜单1</option>
            <option>下拉菜单2</option>
            <option>下拉菜单3</option>
        </select><br>
        <span>无上下padding</span>
        <select  class='select-two'>
            <option>下拉菜单1</option>
            <option>下拉菜单2</option>
            <option>下拉菜单3</option>
        </select>
    </div>
    <hr>
    <p>2. IE不支持border-radius: 圆角</p>
    <div class="div-two">
        <div class="circle-one"></div>
        <div class="circle-two"></div>
    </div>
    <hr>
    <p>3. margin-top失效<br>      
        <span>当时加一个1px的px就可以了。不解</span>
        <pre>
            <code>&lt;!--[if IE 8]&gt;
                &lt;p style="height:1px;display: inline-block;"&gt; &lt;/p&gt;
                &lt;![endif]--&gt;
            </code>
        </pre>
    <p>
    <div class='div-three'>
        <a href="http://blog.csdn.net/zhu1988renhui/article/details/7795923" target="_blank">参考</a>
        <!---->
        <div class='margin-one'></div>
        <div class="margin-two"></div>
        <div class="margin-three"></div>
    </div>
    <hr>
    <p>4. 莫名其妙的多出横线   原因: border导致，   处理：清border
    </p>
    <hr>
    <p>5. 输入框不显示默认文字 原因: IE8不支持placeholder</p>  
    <div>
        <p>方法一：对input加onfocus和onblur事件, 进页面时，还是没有···(再给input加个value就可以啦~~)</p>
        <input type="" name="" onblur="if (this.value == '') {this.value = '方法一';}"
        onfocus="if (this.value == '方法一') {this.value = '';}" value="方法一">
        <p>方法二：引用placeholder.js插件,再加
            <pre>
                <code>
                $(function() {
                    $('input, textarea').placeholder();
                });
                </code>
            </pre>
        </p>
        <input type="" name="" placeholder="方法二">
        <p>总结: 
            <ul>
                <li>方法一在onfous时，值就消失了，placeholer应该是在输入值时，原始值才会消失</li>
                <li>方法二只要加个插件，和那句js，就不用担心有多个input中的placeholer</li>
            </ul>
        </p>
    </div>
    <hr>
    <p>6. IE8不支持a标签里面有button、input等元素的跳转</p>
    <div>
        <a href="http://www.wifiuncle.com" target="_blank">
            <button onclick="window.location=this.parentNode.href;">点击按钮</button>
        </a>
        <a href="http://www.wifiuncle.com"><input type="button" value="Submit" class="button" /></a>
        <p>
            方法: 
            <ul>
                <li>1. 给button加 <code>onclick="window.location=this.parentNode.href;"</code></li>   
                <li>2. 参考<a href="http://stackoverflow.com/questions/2949910/how-to-make-href-will-work-on-button-in-ie8" >Stack Overflow</a>
                <pre>
                    <code>
                    $('input.button').click(function(){
                        document.location = $(this).parents('a').first().prop('href');
                    });
                    </code>
                </pre>
                    </li>
            </ul>
        </p>
    </div>
    <hr>
    <p>7. IE8 对str.trim()会报错, 应$.trim(str);</p><hr>
    <p>8. a标签中含有img标签就会有蓝色边框  
        <br>原因： ie6,7,8中对具有link属性的img标签会自动添加2px的border。
        <br>方法： img   border: none</p>
    <div class="div-seven">
        <a href="http:www.wifiuncle.com"><img src="./images/circle.jpg"></a>
        <a href="http:www.wifiuncle.com"><img src="./images/circle.jpg" style="border: none\0"></a>
    </div>
    <p>9. 上传图片不能预览(本地可以预览，在服务器就不能预览，不解)<a href="http://blog.csdn.net/yangzhihello/article/details/23851369">参考下这个</a></p>
    <p>10. IE和FF字体偏小  原因: chrome不支持12px以下的字体，会自动转成12px.  IE和FF不会自动转换，所以字就显得比较小.    方法: 统一设置字体12px</p>
    <div class="div-ten">
        <span class="one">我是10px</span>
        <span class="two">我是12px</span>
    </div>
    <p>11. ie8中变量与id冲突时， 必须用var声明变量否则会报错，firefoxhe chrome则不会。</p>
    <div class="div-eleven">
        <p id="eleven"> 我的id是eleven</p>
        <img src="./images/varId.png">
    </div>
    <hr>
    <p>12. flash遮挡住页面中元素 <a href="http://blog.csdn.net/ajaxuser/article/details/6669628">参考</a></p>
    <p>
        <pre>
            <code>
                &lt;object&gt;
                    &lt;param name="wmode" value="opaque"&gt;
                    &lt;embed  wmode="opaque"&gt;&lt;/embed&gt;
                &lt;/object&gt;
            </code>
        </pre>
    </p>
    <hr>
    <p>13. IE8 不支持bind this</p>
    <p><a href="http://www.tuicool.com/articles/Mr6nMj7">一行代码轻松搞定各种IE兼容问题</a></p>
    <p>加上这句也是蛮好用的 
        <code>
             &lt;meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/&gt;
        </code>
    </p>
    <p>14.用jquery-1.7.1.min.js 汉字可能会乱码， 改用jquery-1.9.1.min.js  (还是1.8忘记了。。。)</p>
    <p>不支持footer(应该是h5)</p>
    <div class="footer">
        <footer>

        </footer>
    </div>
    <script type="text/javascript" src='./js/jquery-1.7.1.min.js'></script>
    <script type="text/javascript" src='./js/placeholder.js'></script>
    <script type="text/javascript">
        $(function() {
            //$('input, textarea').placeholder();
            $('input.button').click(function(){
                document.location = $(this).parents('a').first().prop('href');
            });
            var str = "我 是 空 格      ";
            console.log($.trim(str));
            //console.log(str.trim());
            var eleven；
            //eleven = $('#eleven').text(); //报错
            var eleven = $('#eleven').text();
            console.log(eleven);
        });
      </script>
</body>
</html>

.div-one {
    width: 600px;
    height: 100px;
}
.div-one select{    
    width: 200px;
    height: 40px;
    margin: 0 10px;

    /*IE的盒子模型*/
}
.div-one .select-one {
    padding: 10px;
    border: 1px solid red;
    margin-bottom: 10px; 
}
div[class^='circle'] {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-left: 20px;
    border: solid 1px red;
    behavior: url(./PIE.htc);/*支持IE8圆角  不行就加position:relative; 再不行就加z-index: 10*/
    border-radius: 50px;
    display: inline-block;
}
.circle-two {
    background: url(../images/circle.jpg);
}
/*margin 失效*/
.div-three {
    width: 200px;
    height: auto;
    margin: 20px;
}
.div-three .margin-one,
.div-three .margin-two{
    width: 50px;
    height: 50px;
    float: left;
    margin: 5px
}
.div-three .margin-three {
    width: 110px;
    height: 50px;
    margin: 5px 0 0 5px;
    clear: both;
    background: #50C66C;
}
.div-three .margin-one { background: #51718E;}
.div-three .margin-two { background: #8E518A;}
.div-seven a img{
    width: 200px;
    height: 100px;
    margin: 20px;
}
.div-ten .one {
    font-size: 10px;
    display: inline-block;
    margin-right: 20px;
}
.div-ten .two {
    font-size: 12px;
}
.footer {
    width: 100%;
    height: 100px;
    background: #ECEBF3;
    border-radius: 
}

下载地址

链接：https://pan.baidu.com/s/1IpnSTXeJAn93urUHjWEAqQ 密码：fx5e

有用的小伙伴，麻烦给点激励哒~~~
点赞or评论，随便砸~

WiFi_Uncle
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一句代码解决css ie8兼容性问题
12-13
由于家里用的是IE8,在公司测试好的页面回家却会有一些问题发生，所以在网上寻找了一下解决办法，加几行代码就可以让访问的IE8自动调用IE7的渲染模式，这样可以保证最大的兼容性，原文如下，经测试好用，推荐给大家：...
解决bootstrap 3 IE8兼容性问题
06-11
解决bootstrap 3 IE8兼容性问题 研究了下getbootstrap.com网站在IE8下是正常的，他们采取的解决办法是： <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!--...
IE8 兼容性问题总结
夕阳枫的博客
10-25 6809
*IE8 兼容性问题总结*    最近公司的项目要求兼容ie，因为客户需求需要兼容到ie8，接手项目时，技术架构已经形成 ：webpack + gulp+ es6 +jquery 。在兼容ie8过程，遇到过一些问题，总结如下。
IE8 兼容性问题
hw1287789687的专栏
05-16 2325
IE8 兼容性问题设置script标签内容在IE8中,下面的代码报错:$('#invoiceListDot').text(htmlTemplate);说明:invoiceListDot 是一个script标签<script id="invoiceListDot" type="text/x-dot-template"> {{? it.invoiceInfoDtos}}
background ie8兼容性问题
全场梦游c的博客
01-22 2029
问题：使用图片做背景并铺满整个屏幕，但不使用img标签。 解决：在相应的div中添加如下style background: url(img/bg.jpg) no-repeat center center; background-size: 100% 100%; /*为了解决ie背景图片拉伸*/ ...
ueditor ie8兼容性问题
zwkkkk1的博客
09-21 8246
ie8情况下，在进入加载有uEditor编辑器页面时候，不显示工具栏，会提示ueditor 缺少对象或者出现错误 1.引用Ueditor的js 的时候用绝对路径 网上搜出来的一种解决方法 不过我通过该方法没有解决 而且放到服务器上，不好使用绝对路径 2.经过测试 ueditor 1.4.3.2 在ie8下不会报错， 在官网上下载1.4.3....
IE8兼容性问题及解决方案
随心而作
08-09 1万+
前言 最近在做一个项目，要求是兼容IE8，还要兼容1280屏幕分辨率，写页面其实还好，就是这个IE8贼恶心，用到的很多css属性IE8都不兼容，想要的效果也呈现不出来。先来说一说我遇到的IE8不支持的哪些css属性吧 1，background不支持连写 background:url(../img/background.png) no-repeat -580px 0/auto 100%; *...
IE8兼容性问题的快速解决办法
两眼一睁 神志不清
03-31 933
你对IE8兼容性问题的解决方法是否了解，这里和大家简单分享一下，当IE8检测到某网站不兼容时，地址栏右侧就会出现兼容性视图按钮，出现问题只需轻轻一点，大部分网页显示就会正常了。 IE8兼容性问题的快速解决办法 为了减少这类影响您网页浏览体验的情况出现，IE8不仅采用了国际通用的网页开发标准——W3C标准(WorldWideWebConsortium即万维网联盟标准)，并且为了兼容基于其它网页标准开发的网站，IE8还专门提供了“兼容性视图”功能。当IE8检测到某网站不兼容时，地址栏右侧就会出现兼容性视图
ie常见兼容性问题
qq_41818857的博客
02-05 1325
1.块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大问题：常见是IE6中后面的一块被顶到下一行 解决：在float的标签样式控制中加入 display:inline；将其转化为行内属性 2.设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置的高度 解决：给超出高度的标签设置overflow：hidden；或者设置行高line-height 小于自己设置的高度 注：（这种情况一般出现在设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都
react 项目的一个ie8兼容性问题
一条宝鱼的专栏
01-05 1560
相信现在很多人在使用react+webpack做项目，然后通过babel来解决ES6/7的兼容性问题，对于ie8的兼容也有一些经验和方案。不过今天在解决汇金账房的ie8兼容过程中仍然遇到一个坑，同时发现现有资料的一些问题。 首先说一下兼容ie8的通用方案，大家一般是按照 Make your React app work in IE8 中的方法去做，网上也会搜到一些方法，比如添加 transf
ie8兼容性问题(三) 缓存问题
云_飞扬
09-19 1813
IE8缓存问题 ie8不进方法直接走success url不变化
IE8 兼容性问题（属性名区分大小写）
09-06
在Web开发中，尤其是在JavaScript编程中，浏览器兼容性问题...总之，IE8的属性名大小写兼容性问题是一个需要注意的细节，通过理解这个问题的原因以及采取适当的修复和预防措施，可以确保代码在不同浏览器下的稳定运行。
IE6,IE7,IE8兼容性问题
03-16
### IE6, IE7, IE8 兼容性问题详解 #### 一、引言 在Web开发过程中，确保网站能够在各种不同的浏览器中正常显示是非常重要的。尤其是在早期的Web时代，Internet Explorer（简称IE）系列浏览器占据着重要的市场份额...
国际手机号码的正则表达式
热门推荐
WiFi_Uncle的专栏
07-20 1万+
https://stackoverflow.com/questions/2113908/what-regular-expression-will-match-valid-international-phone-numbers
js计算文件MD5值
WiFi_Uncle的专栏
10-30 1万+
百度百科解释MD5Message Digest Algorithm MD5（中文名为消息摘要算法第五版）为计算机安全领域广泛使用的一种散列函数，用以提供消息的完整性保护。该算法的文件号为RFC 1321（R.Rivest,MIT Laboratory for Computer Science and RSA Data Security Inc. April 1992）。 MD5即Message-D
防js代码注入
WiFi_Uncle的专栏
10-11 4868
1. 什么是 JavaScript 注入攻击？每当接受用户输入的内容并重新显示这些内容时，网站就很容易遭受 JavaScript 注入攻击。让我们研究一个容易遭受 JavaScript 注入攻击的具体应用程序。假设已经创建了一个客户反馈网站。客户可以访问网站并输入对产品的反馈信息。当客户提交反馈时，反馈信息重新显示在反馈页面上。举个例子首先， 我在某个输入框中输入js代码<script type="
html标签转义和反转义
WiFi_Uncle的专栏
10-11 4402
html标签转义和反转义 js防注入
textArea实时显示文本输入框输入的字数
WiFi_Uncle的专栏
09-01 3175
实时显示文本输入框的字数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值