在页面发生跳转的时候红框内容会发生跳转，这是为什么呢？是因为那个图标的问题吗？有什么方法解决吗?

course

@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;

}