重学前端-CSS篇6-IE的处理方式与vertical-align实现图片垂直水平居中-前端技术-梁兴华个人博客

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