导航部分第一个li错位的问题

最新推荐文章于 2019-01-17 08:58:00 发布

原创最新推荐文章于 2019-01-17 08:58:00 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

12 篇文章

订阅专栏

本文探讨了在不同浏览器中出现的导航栏错位问题，并详细分析了解决方案，包括调整CSS样式来修正错位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天学习慕课网企业实战项目的时候发现了导航部分第一个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="#" onclick="AddFavorite(window.location,document.title)">加入收藏</a></li>
            <li><a href="#" onclick="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>

CSS：

*{
    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>元素默认情况下底部会有空白，那么这个空白到底是从哪里来的？
有什么比较好的方法可以去掉这个空白？

img { display:block; }
img { vertical-align:top/bottom/middle; }

Demo： http://jsbin.com/oDapIBi/1/edit

修改

举报 3 条评论 • 邀请回答

按投票排序按时间排序

11 个回答

尤雨溪不会搞艺术的程序员不是好设计师

子雄等 118 人赞同

一丝大大提这个问题真的不是想自问自答吗？

@zecy 的回答点到了一些，但还是没说清楚。

要理解这个问题，首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline，这是一个西文排版才有的概念：

可以看到，出现在baseline下面的是 p 啊，q 啊, g 啊这些字母下面的那个尾巴。

对比一下 vertical-align 的另外两个常见值，top 和 bottom:

可以看到，baseline 和 bottom 之间有一定的距离。实际上，inline 的图片下面那一道空白正是 baseline 和 bottom 之间的这段距离。即使只有图片没有文字，只要是 inline 的图片这段空白都会存在。

到这里就比较明显了，要去掉这段空白，最直接的办法是将图片的 vertical-align 设置为其他值。如果在同一行里有文字混排的话，那应该是用 bottom 或是 middle 比较好。

另外，top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0，那么 baseline 与 bottom 之间的距离也变为0，那道空白也就不见了。如果没有设置 line-height，line-height 的默认值是基于 font-size 的，视渲染引擎有所不同，但一般是乘以一个系数（比如1.2）。因此，在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然，这样做的后果就是不能图文混排了。

延伸阅读： What is Vertical Align?

评论区的回答：

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也可以达到同样的效果。

可以先跳过去，随着经验越来越丰富，理解也会更深入。