您好，在写小慕医生的banner模块中相关问题，请麻烦解解惑。

# 具体遇到的问题
您好老师，请问.banner {}盒子和 .banner .banner-img{}盒子不设置高度，而是让.banner .banner-img{}盒子自动撑开.banner盒子会出现banner的高度和.banner .banner-img高度有细微的差别，不一致，不理解这个现象（如果设置了高度两者没有差距，我使用的谷歌浏览器）；2.也造成ol的位置偏移也存在问题（我截图了）；# 报错内容截图

#相关课程内容截图

* {
    padding: 0;
    margin: 0;
}

/* 去掉所有ul ol的小圆点 */
ul, ol {
    list-style: none;
}

/* 去掉所有超级链接下划线 */
a {
    text-decoration: none;
}

/* 使用继承性，给body标签设置字体 */
body {
    font: normal 14px/25px '微软雅黑';
}

/* 页面头部样式 */
header {

}

/* 页面头部上半部分 */
header .header-top {
    width: 1201px;
    margin: 0 auto;
    /* 清除浮动 */
    overflow: hidden;
}

header .header-top .logo {
    padding-top: 39px;
    width: 193px;
    height: 63px;
    /* 左浮动 */
    float: left;
    color: #015E58;
    font-size: 20px;
}

header .header-top .logo h1 {
    width: 193px;
    height: 63px;
}

header .header-top .tool {
    /* 右浮动 */
    float: right;
    width: 266px;
    height: 65px;
    padding: 36px;
}

header .header-top .tool .row1 {
    margin-bottom: 12px;
}

header .header-top .tool .row1 .tel {
    width: 32px;
    height: 26px;
}

header .header-top .tool .row1 .telnumber {
    font-size: 20px;
    color: #00978E;
    display: inline-block;
    width: 158px;
    height: 26px;
    text-align: center;
}

header .header-top .tool .row1 .icon {
    width: 24px;
    height: 24px;
}

header .header-top .tool .row1 .chinese_icon {
    margin-right: 7px;
}

header .header-top .tool .row2 {
    width: 264px;
    height: 28px;
    border: 1px solid rgba(202,202,202,0.60);
    background: #FFFFFF;
}

header .header-top .tool .row2 input {
    float: left;
    width: 224px;
    height: 28px;
    border: none;
    padding-left: 20px;
    outline: none;
}

header .header-top .tool .row2 button {
    float: left;
    border: none;
    width: 20px;
    height: 20px;
    background: none;
    outline: none;
    cursor: pointer;
    /* 相对定位微调位置 */
    position: relative;
    top: 3px;
    right: 3px;
}

/* 导航条样式设计 */
header .main-nav {
    width: 100%;
    height: 60px;
    background-color: #00978E;
    margin: 0 auto;
}

header .main-nav ul {
    height: 60px;
    padding-left: 360px;
}

header .main-nav ul li {
    float: left;
    width: 150px;
    height: 60px;
    font-size: 16px;
    color: #FFFFFF;
    /* 行高设置文字垂直居中 */
    line-height: 60px;
    text-align: center;
}

header .main-nav ul li.current {
    background-color: #015E58;
}

header .main-nav ul li a {
    display: block;
    width: 150px;
    height: 60px;
    font-size: 16px;
    color:white;
}

header .main-nav ul li a:hover {
    background-color: orange;
}
/**********************问题区域***********************************/
.banner {
    width: 100%;
    position: relative;
    /* height: 570px; */ 注释掉就会出现不一致的情况
}

.banner .banner-img {
    width: 100%;
/* height: 570px;*/ 注释掉就会出现不一致的情况
}
/**********************问题区域***********************************/
.banner .center {
    width: 1200px;
    height: 300px;
    background-color: orange;
    /* 绝对定位 */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -600px;
}

.banner .center h2 {
    font-size: 60px;
    font-weight: normal;
    color: #015E58;
    /* 绝对定位 */
    position: absolute;
    top: 50%;
    margin-top: -84px;
    margin-left: 148px;
}

.banner .center .left-btn {
    display: inline-block;
    width: 56px;
    height: 64px;
    background-color: rgba(202,202,202,0.60);
    line-height: 64px;
    text-align: center;
    /* 利用绝对定位垂直居中 */
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -32px;
}

.banner .center .right-btn {
    display: inline-block;
    width: 56px;
    height: 64px;
    background-color: rgba(202,202,202,0.60);
    line-height: 64px;
    text-align: center;
    /* 利用绝对定位垂直居中 */
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -32px;
}

.banner ol {
    width: 120px;
    height: 12px;
    background-color: red;
    /* 绝对定位 */
    position: absolute;
    left: 50%;
    margin-left: -60px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张氏医院</title>
    <meta name="Keywords" content="张氏医院是专业的医院，理念就是责任、品质、关爱">
    <meta name="Description" content="美容、减脂、内科、外科">
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    
    <header>
        
        <div class="header-top">
            
            <div class="logo">
                <h1>张氏医院</h1>
            </div>
            
            <div class="tool">
                <div class="row1">
                    <img class="tel" src="images/tel.png" alt="咨询电话" />
                    <span class="telnumber">400-888888888</span>
                    <img class="chinese_icon icon" src="images/chinese_icon.png" alt="切换中文" />
                    <img class="english_icon icon" src="images/english_icon.png" alt="切换英文" />
                </div>
                <div class="row2">
                    <input placeholder="找医生/找科室...">
                    <button><img src="./images/search.png" /></button>
                </div>
            </div>
        </div>
        
        <nav class="main-nav">
            <ul>
                <li class="current"><a href="#">页首</a></li>
                <li><a href="#">医院概况</a></li>
                <li><a href="#">医院动态</a></li>
                <li><a href="#">专家学科</a></li>
                <li><a href="#">服务指南</a></li>
                <li><a href="#">医院文化</a></li>
                <li><a href="#">信息公开</a></li>
                <li><a href="#">互动交流</a></li>
            </ul>
        </nav>
    </header>

    
    <section class="banner">
        <img class="banner-img" src="images/banner.png" />
        <div class="center">
            <h2>责任、科学、严谨</h2>
            <a class="left-btn" href="#"><</a>
            <a class="right-btn" href="#">></a>
        </div>
        
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </section>
.....