在跳轉(zhuǎn)頁面的時(shí)候圖標(biāo)會跳動

在頁面發(fā)生跳轉(zhuǎn)的時(shí)候紅框內(nèi)容會發(fā)生跳轉(zhuǎn)，這是為什么呢？是因?yàn)槟莻€(gè)圖標(biāo)的問題嗎？有什么方法解決嗎?

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>course</title>
</head>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">

<body>
  <div class="container">
    <div id="header" class="clearfloat">
      <div id="left-top">
        <ul>
          <li><i class="iconfont">&#xe611;</i><a href="#">給我們意見</a></li>
          <li><i class="iconfont">&#xe91a;</i><a href="#">關(guān)于我們</a></li>
          <li><i class="iconfont">&#xe638;</i><a href="javascript:aLogin()">會員登錄</a></li>
        </ul>

      </div>
      <div id="navi">
        <ul>
          <li><a href="index.html">首頁</a></li>
          <li><a href="breads.html">全部面包</a></li>
          <li><a href="#">面包課堂</a></li>
          <li><a href="activity.html">會員社區(qū)</a></li>
        </ul>
      </div>
      <div class="form-box">
        <form action="#" method="get">
          <input type="text" placeholder="搜索" class="search">
          <input type="submit" class="searchBtn" value="" />
        </form>
      </div>
    </div>

  </div>

</body>

</html>

@font-face {
  font-family: 'iconfont';
  src: url('../font/iconfont.eot');
  src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
  url('../font/iconfont.woff') format('woff'),
  url('../font/iconfont.ttf') format('truetype'),
  url('../font/iconfont.svg#iconfont') format('svg');
}

.iconfont{
  font-family:"iconfont" !important;
  font-size:18px;font-style:normal;
  color:#afb4ae;
  margin-right:3px;
  text-align:center;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
html{
  overflow-y: scroll;
}

body {
  background:#f5f4f2;
}

.container{
    max-width:1078px;
    margin: 30px auto;
    margin-bottom: 0px;
    position: relative;
  min-height:calc(100vh - 200px);
    }

#header{
    width:100%;
    height:80px;
    }

#left-top{
  width: 100%;
  overflow: hidden;
  min-height: 36px;
}
#left-top ul{
    float: right;
  width: 370px;
}
#left-top li{
    display:inline-block;
    width: 120px;
    text-align: center;
}
#left-top li>a{
  font-size: 16px;
  line-height: 16px;
}
#navi{
    margin-left: 50px;
    float:left;
    padding-bottom:5px;
    border-width:3px 0;
    border-style:solid;
    border-color:#bababa;
}

#navi ul{
    margin-top:4px;
    }

#navi li{
    display:inline-block;
    padding-left:70px;
    width:100px;
    }

#left-top li a,
#navi li a{
    color:#bababa;
}

#left-top li a:hover,
#navi li a:hover{
    color: #666;
}

#left-top ul li:last-child a{
    background-color: #afb4ae;
    color: #e2e2e0;
}


.form-box{
    float:right;
    width:200px;
    height:36px;
    padding-left: 24px;
    line-height:36px;
    position: relative;
}
.searchBtn{
    border:none;
    background:url(../image/search.png) no-repeat;
    width: 16px;
    height: 16px;
    cursor:pointer;
    /*line-height:16px;*/
  display: inline-block;
  vertical-align: middle;
    }
.form-box form{
    display: block;
    background: #FFF;
    overflow: hidden;
}
.search{
    display: inline-block;
    border: 0;
    outline: 0;
    z-index: 10;
  padding: 10px;
}

回答

編輯回答