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

今天学习慕课网企业实战项目的时候发现了 导航部分第一个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>


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>元素默认情况下底部会有空白,那么这个空白到底是从哪里来的?
有什么比较好的方法可以去掉这个空白?
  1. img { display:block; }
  2. img { vertical-align:top/bottom/middle; }
Demo: jsbin.com/oDapIBi/1/edi
修改
按投票排序 按时间排序

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


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


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值