[ 打败 IE 的葵花宝典 ] IE低版本中使用注释方法来使样式样式只能在IE中起作用达到兼容

实例:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>Insert you title</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

.wrap {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 200px;
    background: #999;
}

.valigh-fix {
    display: none;
    width: 1px;
    margin-left: -1px;
}
</style>
<!-- 
    但是,现在我们需要对IE7和更低版本的添加样式,这些样式必须独立出来因为他们只对IE起作用。为了达到这个效果我们使用了特殊的注释让样式只能在IE下起作用。
    目前情况下,这个注释告诉IE浏览器当前样式定义只能在IE7或者更低版本下起作用。
 -->
<!--[if lte IE 7]>
<style type="text/css">
    .valigh-fix,.valign-center{
      display: inline-block;
      vertical-align: middle;
    }
    .valign-center{
      width: 100%;
    }
    .valigh-fix {
      height: 100%;
    }
    .valigh-fix,.valign-center{
      display: inline;
    }
</style>
<![endif]-->
</head>
<body>
    <div class="wrap">
        <div class="valign-center">
            <p>text text text text text text</p>
            <p>content content content content content</p>
        </div>
        <div class="valigh-fix"></div>
    </div>
</body>
</html>

 

posted @ 2016-07-08 20:54  窗棂  Views(190)  Comments(0Edit  收藏  举报