IE浏览器下常见的CSS兼容问题
宽高bug
【1】IE6-浏览器下子元素能撑开父级设置好的宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
height: 300px;
width: 300px;
background-color: #ccc;
border: 10px solid black;
}
.in{
height: 400px;
width: 100px;
background-color: red;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box" id="box">
<ul class="list" id="list">
<li class="in" id="test">test</li>
</ul>
</div>
</body>
</html>
【2】IE6-浏览器下最小高度问题，设置(0-15px)高度小于等于15px的元素，在IE6下会被当作15px来处理
【解决】
[1]设置font-size为0，但最小高度为2px
[2]设置overflow:hidden，但最小高度为1px
[3]要想实现最小高度为0，只能是不设置高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
.box{
height: 0px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
边框bug
【1】IE6-浏览器下1px的点线边框，点线会变成虚线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
.box{
height: 300px;
width: 300px;
background-color: #ccc;
border: 1px dotted black;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
【2】标准下背景会延伸到边框区，而IE7-浏览器下背景只延伸到padding区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
.box{
height: 300px;
width: 300px;
background-color:#ccc;
border: 10px dashed red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
【3】在IE10-浏览器下被<a>标签包含的<img>元素会产生边框
【解决】给图片设置{border: none}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
img{
height: 300px;
width: 300px;
background-color:#ccc;
}
</style>
</head>
<body>
<a href="#"><img src="#"></a>
</body>
</html>
盒模型bug
【1】IE7-浏览器下父级有边框，无法阻止子元素的上下margin值传递
【解决】触发父级的haslayout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
border: 10px solid black;
background-color: red;
}
.in{
height: 100px;
width: 100px;
margin-top: 50px;
background-color: blue;
}
</style>
</head>
<body>
<ul class="list">
<li class="in"></li>
</ul>
</body>
</html>
【2】IE7-浏览器下不设置文档声明会导致怪异盒模型解析。在怪异盒模型下内容宽=width-2*padding-2*borderWidth
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
.box{
height: 100px;
width: 100px;
border: 40px solid black;
background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
【3】IE6-浏览器下使用margin负值，使元素移出父级，移出部分会被父级裁掉
【解决】给子级加相对定位relative
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
margin-left: 100px;
height: 300px;
width: 300px;
background-color: #ccc;
}
.in{
margin-left: -30px;
height: 100px;
width: 100px;
background-color: red;
} </style>
</head>
<body>
<ul class="list">
<li class="in"></li>
</ul>
</body>
</html>
LIbug
【1】(li的4px空隙bug)IE7-浏览器下，li本身没浮动，但内容有浮动，li下边会多出4px的空隙
【解决】
[1]给li加浮动
[2]设置vertical-align
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
width: 200px;
background-color: lightgreen;
}
.in{
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<ul class="list">
<li class="in">
<span style="float: left">1231</span>
</li>
<li class="in">
<span style="float: left">1232</span>
</li>
</ul>
</body>
</html>
【2】(li下的4px间隙和最小高度共存的问题)IE7浏览器下，当li下的4px间隙问题和最小高度问题共存的时候，设置垂直对齐方式无效
【解决】给li加浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
width: 200px;
background-color: lightgreen;
}
.in{
height: 12px;
background-color: lightblue;
overflow: hidden;
vertical-align: middle;
}
.span{
float: left;
}
</style>
</head>
<body>
<ul class="list">
<li class="in">
<span class="span">1231</span>
</li>
<li class="in">
<span class="span">1232</span>
</li>
</ul>
</body>
</html>
【3】(li的3px空隙bug)IE7-浏览器下li有高度或宽度或zoom:1，且仅包含内联元素，且内联元素被设置为display:block，li下会多出3px的垂直间距
【解决】触发li中子元素的haslayout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
width: 200px;
background-color: lightgreen;
}
.in{
height: 100px;
background-color: lightblue;
}
.span{
display: block;
}
</style>
</head>
<body>
<ul class="list">
<li class="in">
<span class="span">1231</span>
</li>
<li class="in">
<span class="span">1232</span>
</li>
</ul>
</body>
</html>
浮动bug
【1】(3pxbug)在IE6-浏览器下浮动元素和非浮动元素相邻时，会出现3px像素的空隙
【解决】
[1]使用CSShack，给浮动元素设置相反方向的-3px的margin值，将非浮动元素的相应方向的margin设为0(加IE6前缀)
[2]去掉非浮动元素的margin值，加浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
.box{
width: 100px;
height: 100px;
}
#box1{
float: left;
background-color: red;
_margin-right:-3px;
border-right: 1px solid green;
}
#box2{
margin-left: 100px;
_margin-left: 0;
border:1px solid black;
background-color: blue;
}
</style>
</head>
<body>
<div class="box" id="box1"></div><div class="box" id="box2"></div>
</body>
</html>
【2】IE6-下父元素浮动后，且子元素设置了高度，如果父元素不设置宽度，宽度会撑满整行
【解决】
[1]给浮动的父元素设置宽度
[2]给子元素设置宽度
[3]给子元素设置浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
float: left;
background-color: green;
}
.in{
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<ul class="list">
<li class="in">我是内容</li>
</ul>
</body>
</html>
【3】(浮动折行)在IE7-浏览器下，如果两个元素一个右浮动，一个不浮动。浮动元素会折到下一行
【解决】
[1]给不浮动的元素也加浮动
[2]在HTML中先放右浮动的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
width: 500px;
background-color: lightgreen;
overflow: hidden;
}
.in{
width: 100px;
height: 100px;
}
.in1{
background-color: lightyellow;
}
.in2{
background-color: lightblue;
float: right;
} </style>
</head>
<body>
<div class="list">
<span class="in in1">我是不浮动</span>
<span class="in in2">我是右浮动</span>
</div>
</body>
</html>
【4】(双边距bug)IE6-浏览器下块元素有浮动，且有横向的margin值。若仅有左margin，最左边的浮动的块元素的左margin会放大成两倍。若仅有右margin，最右边的浮动的块元素的右margin会放大成两倍。若左右都有，最左边的左margin和最右边的右margin会放大成两倍。
【解决】给块元素设置display:inline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
float: left;
background-color: #ccc;
}
.in{
float:left;
width: 100px;
height: 100px;
}
.in1{
background-color: lightgreen;
margin-left: 50px;
}
.in2{
background-color: lightyellow;
}
.in3{
background-color: lightblue;
margin-right: 50px;
}
</style>
</head>
<body>
<ul class="list">
<li class="in in1"></li>
<li class="in in2"></li>
<li class="in in3"></li>
</ul>
</body>
</html>
【5】(margin-bottomBUG)在IE7-浏览器下父级宽度和每行元素的宽度之和相差超过3px时，或者有不满行的情况，最后一行的margin-bottom失效
【解决】尽量不要用margin-bottom，而用margin-top代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
width: 350px;
overflow: hidden;
background-color: #ccc;
}
.in{
float:left;
width: 100px;
height: 100px;
margin-bottom: 10px;
margin-right: 10px;
background-color: lightgreen;
}
</style>
</head>
<body>
<ul class="list">
<li class="in"></li>
<li class="in"></li>
<li class="in"></li>
<li class="in"></li>
<li class="in"></li>
</ul>
</body>
</html>
【6】(文字溢出bug)IE6-浏览器下两个浮动元素(浮动元素不能是li)一个左浮无宽度，另一个右浮动宽度与父级宽度相差不超过3px，浮动元素中间有注释或者内联元素，文字就被复制
【解决】
[1]将注释去掉
[2]将内联元素变成块元素
[3]内联元素及注释整个用<div>包起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
width: 200px;
}
.in1{
float:left;
}
.in2{
float:right;
width:198px;
}
</style>
</head>
<body>
<div class="list">
<div class="in1"></div>
<!-- 我是--><span></span><!-- 我是 --><!-- 我是 -->
<div class="in2">多出来的一头猪吗</div>
</div>
</body>
</html>
定位bug
【1】在IE7-浏览器下子元素有相对定位，父级的overflow无效
【解决】给父级也设置相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
background-color: lightgreen;
width: 200px;
height: 100px;
overflow: auto;
}
.in{
position: relative;
width: 100px;
height: 300px;
background-color: lightblue;
}
</style>
</head>
<body>
<ul class="list">
<li class="in"></li>
</ul>
</body>
</html>
【2】在IE6-浏览器下浮动元素和绝对定位元素是并列关系，且浮动元素设置margin-left和width的和正好等于父元素的宽度，这时绝对定位元素会消失
【解决】给定位元素外面包一个div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
background-color: lightgreen;
width: 200px;
height: 100px;
} .in1{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: lightblue;
}
.in2{
float: left;
margin-left: 100px;
display: inline;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<ul class="list">
<li class="in1">定位元素</li>
<li class="in2">浮动元素</li>
</ul>
</body>
</html>
【3】在IE6-浏览器下绝对定位元素的父级元素的宽度为奇数时，元素的right会有1px的偏差；高度为奇数时，元素的bottom会有1px的偏差
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
position: relative;
background-color: black;
width: 199px;
height: 199px;
} .in{
position: absolute;
right: 0;
bottom: 0;
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<ul class="list">
<li class="in">定位元素</li>
</ul>
</body>
</html>
表单bug
【1】IE6-浏览器下label标签只支持for属性，不支持仅仅包含<input>的写法
【解决】使用for属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label><input type="checkbox">label测试文字</label>
</body>
</html>
【2】(input空隙问题)当input元素被div包围时，IE6-浏览器下它们之间上下会各多出1px的空隙；而IE7、8浏览器下它们之间的上边会多出1px的空隙
【解决】给input加浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
input{
margin: 0;
padding: 0;
border: none;
}
.box{
width: 202px;
height: 32px;
border: 1px solid black;
background-color: red;
}
.ipt{
width: 200px;
height: 30px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<input class="ipt">
</div>
</body>
</html>
【3】IE6-浏览器下当input元素被div包围时，在已经给input设置浮动的情况下，设置border:none无法得到理想效果
【解决】
[1]设置border:0
[2]重置input的背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
input{
margin: 0;
padding: 0;
border: none;
}
.box{
width: 201px;
height: 31px;
border: 1px solid black;
background-color: red;
}
.ipt{
width: 200px;
height: 30px;
border: none;
float: left;
}
</style>
</head>
<body>
<div class="box">
<input class="ipt">
</div>
</body>
</html>
【4】IE7-浏览器下输入类型表单控件如<textarea>、<input>等输入文字时，背景图像会跟着文字一起滚动
【解决】把背景加给父级，并清掉自身背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
.test{
overflow: auto;
background: url(img/bg.jpg) no-repeat;
font-size: 50px;
line-height: 60px;
height: 200px;
width: 500px;
}
</style>
</head>
<body>
<textarea class="test"></textarea>
</body>
</html>
【5】IE6-浏览器中select控件无法被<div>覆盖，因为在IE6中select控件是处于最顶层的。
【解决】iframe比select优先级高，把iframe嵌套在<div>里面，并设置为不可见
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input{
width: 100px;
height: 100px;
background-color: lightgreen;
}
.box{
width: 200px;
height: 200px;
position: absolute;
top: 20px;
left: 20px;
background-color: pink;
}
</style>
</head>
<body>
<select class="select">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
<div class="box" id="box"><iframe style="width:50px; height:50px;border: 0; position: absolute; opacity = 0; filter:alpha(opacity=0)"></iframe></div>
</body>
</html>
IE浏览器下常见的CSS兼容问题的更多相关文章
- ie下常见的css兼容问题
1.border-radius 边框圆角 IE8及以下浏览器不支持border-radius webkit引擎支持-webkit-borderradius 私有属性 mozilla Gecko引擎支持 ...
- placeholder在不同浏览器下的表现及兼容方法
1.什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...
- placeholder在不同浏览器下的表现及兼容方法（转）
1.什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...
- placeholder在不同浏览器下的表现及兼容方法 placeholder兼容
1.什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...
- IE下常见的js兼容问题
1.IE下不支持console.log() 2.IE下不支持addEventListener() 解决办法:用IE相应的attachEvent() 3.IE下请求后台接口会有缓存 解决方案,接口加版本 ...
- 关于各浏览器下Hack的写法
下面是我收集有关于各浏览器下Hack的写法: 1.Firefox @-moz-document url-prefix() { .selector { property: value; } } 上面是仅 ...
- 主流浏览器css兼容问题的总结
最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,fire ...
- 【转载】各浏览器CSS兼容问题
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...
- div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 ...
随机推荐
- wince中测试驱动应用程序的实现
这里建的工程是MFC的smart device,选择ARMV4I的指令集,不同的设备可能会有轻微的不同,不过大体实现是一样滴.还有,这里选的应用类型是dialog base. 1.应用监测内核动向 内 ...
- jsti 和EL用法注意点
今天使用stl 结合El做jsp页面展现,出现了个问题,怎么调也调不好,最后将jstl的源码拿来跟踪调了一下才明白其中的道理. 在使用jstl tag <c:forEach var=" ...
- 在windows上安装ASP.NET 5(译文)
本文将介绍如何在windows上安装ASP.NET5,包括单独安装和通过Visual Studio 2015 安装. 本文包括: 通过Visual Studio安装ASP.NET 单独安装ASP.NE ...
- ASP.NET 5系列教程 (五)：在Visual Studio 2015中使用Grunt、Bower开发Web程序
基于Visual Studio 2015,你可以: 方便的管理前端包,如jQuery, Bootstrap, 或Angular. 自动运行任务,如LESS.JavaScript压缩.JSLint.Ja ...
- QQ揭秘：如何实现窗体靠边隐藏？【低调赠送：QQ高仿版GG 4.2 最新源码】
QQ有个靠边隐藏的功能,使用起来很方便:在屏幕上拖动QQ的主窗体,当窗体的上边沿与屏幕的上边沿对齐时,主窗体就会duang~~地隐藏起来,当将鼠标移到屏幕上边沿的对应区域时,主窗体又会duang~~显 ...
- git抽疯了。。。
今天用git推送提交的时候,莫名其妙的要求输入密码,输就输吧,输入了还都验证不了,继续弹出输入框,难道我的密码记错了,于是我去更改了密码,但还是继续弹出密码输入框. 百思不得姐,于是把重新生成了pub ...
- java提高篇(十四)-----字符串
可以证明,字符串操作是计算机程序设计中最常见的行为. 一.String 首先我们要明确,String并不是基本数据类型,而是一个对象,并且是不可变的对象.查看源码就会发现String类为f ...
- Comet实现的网页聊天程序
“上一篇”介绍了我在c/s程序中用了那些技术,如今只谈c/s不谈b/s那未免out了,势必要写一写b/s的程序与大家共勉. 回忆做技术这些年,06年每天盯着“天轰穿”的视频不亦乐乎,估计那是一代程序员 ...
- [硬件项目] 2、汽车倒车雷达设计——基于专用倒车雷达芯片GM3101的设计方案与采用CX20106A红外线检测芯片方案对比
前言 尽管每辆汽车都有后视镜,但不可避免地都存在一个后视镜的盲区,倒车雷达则可一定程度帮助驾驶员扫除视野死角和视线模糊的缺陷,提高驾驶安全性.上一节已经分析清倒车雷达的语音模块(上一节),本节将深入分 ...
- 在此记录一下SharpGL最初创建的程序
在此记录一下SharpGL最初创建的程序.完整工程在此. /// <summary> /// The main form class. /// </summary> publi ...