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则不会。
<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>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
</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><!--[if IE 8]>
<p style="height:1px;display: inline-block;"> </p>
<![endif]-->
</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>
<object>
<param name="wmode" value="opaque">
<embed wmode="opaque"></embed>
</object>
</code>
</pre>
</p>
<hr>
<p>13. IE8 不支持bind this</p>
<p><a href="http://www.tuicool.com/articles/Mr6nMj7">一行代码轻松搞定各种IE兼容问题</a></p>
<p>加上这句也是蛮好用的
<code>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
</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评论,随便砸~