今天学习慕课网企业实战项目的时候发现了 导航部分第一个li错位的问题,如图
源码:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="./css/main.css" type="text/css">
<script src="./js/setHomeSetFav.js" charset="GB2312"></script>
</head>
<body>
<div class="top">
<div class="top_content">
<ul>
<li><a href="#">联系我们</a></li>
<li><a href="#" οnclick="AddFavorite(window.location,document.title)">加入收藏</a></li>
<li><a href="#" οnclick="SetHome(window.location)">设为首页</a></li>
</ul>
</div>
</div><!--top结束-->
<div class="wrap">
<div class="logo">
<div class="logo_left">
<img src="./images/logo.jpg" alt="慕课网">
</div>
<div class="logo_right">
<img src="./images/tel.jpg" alt="服务热线">24小时服务热线:<span class="tel">123-456-7890 </span>
</div>
</div> <!--logo部分结束-->
<div class="nav">
<div class="nav_left"></div>
<div class="nav_mid">
<div class="nav_mid_left">
<ul>
<li><a href="#">首页</a></li>
<li><a href="list.html">关于慕课</a></li>
<li><a href="list.html">新闻动态</a></li>
<li><a href="list.html">课程中心</a></li>
<li><a href="list.html">在线课程</a></li>
<li><a href="list.html">人才招聘</a></li>
</ul>
</div>
<div class="nav_mid_right">
<form action="" method="post">
<input type="text">
</form>
</div>
</div> <!--nav_mid结束-->
<div class="nav_right"></div>
</div> <!--nav结束-->
</div> <!--wrap结束-->
</body>
</html>
*{
margin:0;
padding:0;
font-size:12px;
}
body{
background-color:#F5F5F5;
}
.top{
width:100%;
height:27px;
background:url("../images/top_bg.jpg") repeat-x;
}
.top_content{
width:1000px;
margin:0 auto;
}
.top_content li{
list-style-image:url(../images/li_bg.gif);
float:right;
width:70px;
line-height:27px;
}
.top_content a:link,.top_content a:visited{
color:#8E8E8E;
text-decoration:none;
}
.top_content a:hover,.top_content a:active{
color:#900;
text-decoration:none;
}
.wrap{
width:1000px;
margin:0 auto;
}
.logo{
height:80px;
background-color:#fff;
}
.logo_left{
width:200px;
float:left;
}
.logo_right{
width:300px;
float:right;
height:28px;
margin-top:30px;
color:#8E8E8E;
}
.logo_right img{
vertical-align:middle;
margin-right:10px;
}
.tel{
font-family: '微软雅黑';
font-size:16px;
color:#C00;
}
在IE7里面测试没有问题,估计老师讲的时候测试用的就是IE7,但是最新版的IE和chrome和firefox都显示第一行错位了,在网上查了很多,还没有彻底明白,先记录下来
知乎上的回答:
<img>元素底部为何有空白?修改
有什么比较好的方法可以去掉这个空白?
- img { display:block; }
- img { vertical-align:top/bottom/middle; }
修改
11 个回答
评论区的回答:
nav部分占两行的问题 原因:img作为内联元素,会和文字一样具有行高和字号属性,默认对齐baseline.通过截图可以看到,nav部分实际高是83px>80px,溢出了。 解决方案有
转:
以下四种(根据情况任选其一): 1、.logo加上overflow:hidden; 2、.logo_left img 设置display:block; 3、.logo_left img 设置vertical-align:middle/bottom/top 都可以。 4、.logo_left 设置 font-size:0; 参考答案:https://www.zhihu.com/question/21558138
目前我的水平的理解:
第一种的理解是因为logo图片作为内联元素默认的baseline和bottom是存在距离的,所以原本高是80px,现在变成了83px,产生了溢出,用overflow:hidden隐藏溢出部分;
第二种的理解是将logo图片这个内敛元素转为块级元素,这样他就不能超出它的容器.logo_left这个容器的高度80px了,所以它的高变成了80px;
第三种的理解是图片默认情况下baseline和bottom不是同一个位置,所以设置对齐baseline,vertical-align:top就是logo_left的顶部和baseline对齐,
vertical-align:middle就是logo_left的中间和baseline对齐,vertical-align:bottom就是logo_left的底部和baseline对齐,理解的还是比较含糊;
第四种理解是top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0,那么 baseline 与 bottom 之间的距离也变为0,那道空白也就不见了。如果没有设置 line-height,line-height 的默认值是基于 font-size 的,视渲染引擎有所不同,但一般是乘以一个系数(比如1.2)。因此,在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。
可以先跳过去,随着经验越来越丰富,理解也会更深入。