目录
1. IE6双边距问题:
问题描述:
浮动元素拥有同向margin值(left和margin-left,right和margin-right),在ie6s上第一个元素会出现双边距。
解决方案:
解决:ie6 _display:inline;_针对ie6
body{margin:0;}
div{
float:left;
margin-left:10px;
width:100px;
height:100px;background:red;
_display:inline;}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
2.子元素相对定位父元素溢出隐藏失效
问题描述
子元素定位,它的定位为定位,子元素超出父元素的大小。仅仅给父元素overflow:hidden属性,在IE浏览器上不会隐藏溢出的子元素部分。
解决方案:
除了给父元素加overflow:hidden还要给定位父元素加:position:relative;
.box{width:200px;height:200px;background:red; overflow:hidden; position:relative;}
.box2{width:100px;height:300px;background:green; position:relative;}
<div class="box">
<div class="box2"></div>
</div>
图片描述
定位父元素不加定位情况下:
定位父元素定位之后
3. IE转内联块失败
问题描述:
display:inline-block;在IE6和IE7上面转换失败。
解决方案:
*display:inline; *zoom:1;
.box{ display:inline-block;width:200px;height:200px;border:1px solid red;display:inline;*zoom:1}
<div class="box"></div>
<div class="box"></div>
图片描述
4. IE中input输入文字不垂直居中
问题描述:
在IE中文字输入不垂直居中
input{border:none;background:none;line-height: 60px}
.bg{ border:1px solid #000;background:url(so_bg.jpg) no-repeat left center;width:200px;height:60px;}
<input type="text" class="bg"/>
<div class="bg">
<input type="text" style="width:200px;height:60px;"/>
</div>
解决方案:
line-height:高度值.px
图片描述
5 input背景问题
问题描述:
如上面图片显示一样,背景图片会遮盖输入文字。
解决方案:
给inut在相应的padding值:比如padding-left:30px;
这样文字就显示在背景图片的右边而不会被文字遮住。
图片描述
6 li的子元素浮动间隙问题
问题描述:
li的子元素浮动时,IE6和IE7会产生间隙问题。
解决方案:
在<li>上加:vertical-align:middle/top/bottom;
.list{margin:0;padding:0;list-style:none;width:300px;}
.list li{height:30px;line-height:30px;background:red;/*vertical-align:middle;*/}
.list li a{float:left;}//li子元素浮动
.list li span{float:right;}
<ul class="list">
<li><span>2017-05-23</span><a>新闻内容</a></li>
<li><a>新闻内容</a><span>2017-05-23</span></li>
<li><a>新闻内容</a><span>2017-05-23</span></li>
<li><a>新闻内容</a><span>2017-05-23</span></li>
<li><a>新闻内容</a><span>2017-05-23</span></li>
</ul>
图片描述
7. IE6最小高度
问题描述
IE6元素在高度小于19px时,会以19px显示。
.box{height:6px;background:red;font-size:0;}
<div class="box"></div>
8 IE6 最小高度
问题描述:
IE6不支持min-height,针对ie6添加height,在ie6可以有同样效果
min-height :1 最小高度(可以使元素在内容少时显示为最小高度指定的值,内容多时撑开自适应)
2 能大于,不能小于,最小这个高度
解决方案
_height:300px;
9 IE下PNG24支持问题
问题描述
在IE6下png24图片显示为不透明
解决方案
- 适情况而定,优先使用jpg 或者 png8,gif
- js方法解决(适用于透明背景和透明图片)
JS解决方案:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('.pngpic,.logo');
</script>
<![endif]-->
<style type="text/css">
.bg{width:218px;height:288px;background:url(bg.png) no-repeat;_background:url(bg2.png) no-repeat;}
.bg{width:218px;height:288px;background:url(bg.png) no-repeat;}
</style>
</head>
<body style="background:red;">
<img src="bg.png"/>
<div class="bg"></div>
<img src="bg.png" class="pngpic"/>
<div class="bg logo"></div>
<img src="../../2.png"/>
</body>
</html>
10.浮动注释在IE6造成谍影
问题描述
运行代码,在IE6下会多出一只“鬼”。
.test{zoom:1;overflow:hidden;width:500px;}
.box1{float:left;width:100px;}
.box2{float:right;width:400px;}
<div class="test">
<div class="box1"></div>
<!-- 注释 -->
<div class="box2">↓你是什么鬼</div>
</div>
解决方案:
造成此BUG的原因可能是多重混合的,如浮动,注释,宽高定义等等。并且注释条数越多,溢出的文本也会随之增多。
- 删除box1和box2之间所有的注释;
- 不设置浮动等。
图片描述
11 hack条件注释语句
<!--[if IE]>
只能被 IE 识别;
<![endif]-->
<!--[if IE 6]>
这是ie6
<![endif]-->
<!--[if IE 7]>
这是ie7
<![endif]-->
<!--[if IE 8]>
这是ie8
<![endif]-->
<!--[if gt IE 6]>
这是大于ie6
<![endif]-->
<!--
gt(greater than) 大于
gte(greater than or equal)大于等于
lt(less than) 小于
lte(less than or equal) 小于等于
! 非
-->
<!--
IE 条件注释判断语句是 IE 特有的功能,通过 HTML 注释中的条件语句能让不同的 IE 版本识别注释中的内容
自IE10起,标准模式不再支持条件注释
-->
12 CSS-hack属性级
什么是CSS hack
由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!
CSS hack的原理
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景来应用不同的CSS。
CSS hack分类
CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
- 属性前缀法(即类内部Hack):例如 IE6能识别下划线"“和星号” * “,IE7能识别星号” * “,但不能识别下划线”",IE6~IE10都认识"\9",但firefox前述三个都不能认识。
- 选择器前缀法(即选择器Hack):例如 IE6能识别html .class{},IE7能识别+html .class{}或者*:first-child+html .class{}。
- IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本: 。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
.box{width:200px;height:200px;background:red;
*background:blue;background:pink\9;//css hack
} .box2{width:100px;height:100px;background:blue;
_background:green;//css hack
}
<!--
* ie6 7
_ ie6
\9 选择IE6+
-->
<div class="box"></div>
<div class="box2"></div>
图片说明
13 !important 优先级
问题描述:
!important优先级高于行间样式
.box{width:100px;height:100px;background:red!important;}
<!--
!important提升样式优先级
高于
行间样式
-->
<div class="box" style="background:pink;"></div>
图片描述
背景由于优先级的问题显示的并不是pink粉红色。