[ 打败 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>