[ie6]display:inline-block; 的元素不要与字符串放在同一个元素下

 

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
        body{margin:0;}
        h1{
            font-size:0px; /*关键代码 防止在现代浏览器中em元素垂直居中时产生偏移*/
            /*_letter-spacing:-2px;*/

            background:#f00;
            line-height:60px;
            font-family:'simsun';
            float:left;
            padding:0;
        }
        h1 span{
            display:inline-block; /*关键代码*/
            vertical-align:middle; /*关键代码*/

            font-size:0;
            width:20px; height:6px;
            background:#0F0;
            overflow:hidden;
        }
        h1 em{
            display:inline-block; /*关键代码*/
            vertical-align:middle; /*关键代码*/

            font-style:normal;
            font-size:20px;
            background:#00F;
            color:#fff;
        }
    </style>
</head>
<body>
<h1>
    <em>你好</em>
    <span></span>
</h1>
<h1><em></em><span></span></h1>
<h1><em>你好</em><span></span></h1>
</body>
</html>

 

posted on 2012-02-16 16:18  ikun  阅读(156)  评论(0)    收藏  举报

导航