父容器高度大于子图片高度的原因

现象：

<!doctype html>
<html>
<head>
    <title>父容器高度大于子图片高度</title>
</head>
<body>
    <select id="lineselector">
        <option value="baseline">baseline</option>
        <option value="sub">sub</option>
        <option value="super">super</option>
        <option value="top">top</option>
        <option value="text-top">text-top</option>
        <option value="middle">middle</option>
        <option value="bottom">bottom</option>
        <option value="text-bottom">text-bottom</option>
    </select>
    <script type="text/javascript">
        document.querySelector("#lineselector").onchange = function(){
            document.querySelector("#line").style.verticalAlign = this.value;
            document.querySelector("#image").style.verticalAlign = this.value;
        }
    </script>
    <div style="border: 1px blue solid;">
        <div id="line" style="position: relative; height: 0px; width: 0px; display: inline-block; overflow: visible; vertical-align: baseline;">
            <div style="position: absolute; height: 1px; width: 99999px; background: gray; overflow: hidden;">&nbsp;</div>
        </div>
        <img id="image" src="http://www.baidu.com/img/bdlogo.gif" style="border: 1px red solid;"/>
    </div>
</body>
</html>
View Code

 （不知道怎么在博客里插入js）

 

div高度比图片高度大。

原因：img是inline元素，有假想元素。基于baseline定位时，父容器高度为假想元素的下半部分高度+图片高度。

解决方法：即消除假想元素影响。可以是 img { display: block; }; 可以是 div { line-height: 0}; 可以是img {  vertical-align: middle//也可以是其他值 }; 可以是 div { font-size: 0};

感谢：Along和小黄鱼提供的帮助。

参考：http://www.cnblogs.com/winter-cn/archive/2013/05/11/3072929.html#2679273

posted @ 2013-06-18 17:36  snadn  阅读(663)  评论(2)  编辑  收藏  举报