1、IE处理
(1)条件注释表达式
// 只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
// 只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
// 只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
// 只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
// 非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
(2)检测低版本IE
//js中的作用域都是函数作用域
function isIE(version){
var b = document.createElement("b");
b.innerHTML="<!--[if IE "+version+"]><i></i><![endif]-->";
return b.getElementsByTagName("i").length == 1 ;
}
console.log(isIE(8));
2、利用vertical-align实现图片垂直水平居中
原理:使用父元素的伪元素改变父元素baseLine位置,然后进行vertical-align:center实现
PS: 子元素的vertical-align是基于父元素的baseline位置来进行居中对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片垂直水平居中</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
height: 400px;
width: 400px;
border: 1px solid ;
margin: 0 auto;
text-align: center;
}
#wrap:after{
content: "";
display: inline-block;
height: 100%;
width: 0px;
vertical-align: middle;
}
#wrap img{
vertical-align: middle;
}
</style>
</head>
<body>
<div id="wrap">
<img src="img/img2.jpg" width="150"/>
</div>
</body>
</html>
标签:
CSS