加载/刷新时元素位置不同，刷新忽略firefox中的缓存

Question

在加载/刷新页面（输入url或使用链接刷新）并刷新忽略缓存（ctrl + shift + r）时，元素的位置不同。它可以在所有其他浏览器中显示（如第二张图片所示）。可能是什么原因？

• 这是我在浏览器中输入url时的搜索。

• 这是同一页面，但重新加载（刷新）

• 这是我的代码。

  <div class="my-search-box">
  <span style="position: relative">
      <input type="text" autocomplete="off" placeholder="Search..." 
                name="s" class="tm-input"> 
      <a href="javascript:void(0)"><i class="fa fa-search fa-lg"></i></a>
  </span>
  </div>
  

• CSS

  form input {
    width: 225px;
    height: 27px;
    padding: 5px 10px;
  
    position: relative; 
    right: 0px;           
  }
  
  .my-search-box{
      position: relative; 
      padding: 5px; 
      display: box;
      overflow: hidden;'
  }
  
  .my-search-box a{   
      position: absolute; 
      right: 5px; 
      padding: 2px 10px; 
      z-index: 2; 
      border-left: 1px solid #bfbfbf;
  }
  
  .my-search-box a i {
      width: 13px;
  }
  

Answer 1

更新了FIDDLE - working in chrome and firefox not checked in IE

http://jsfiddle.net/g3412syo/7/

form input {
  width: 225px;
  height: 27px;
  padding: 5px 10px;
  position: relative; 
  right: 0px;           
}

.my-search-box{
    position: relative; 
    padding: 5px; 
    display: box;
    overflow: hidden;'
}

.my-search-box a{   
    position: absolute; 
    right: 5px; 
    top:0;//new changes
    padding: 10px 10px; //changed padding
    z-index:20; //changed
    border-left: 1px solid #bfbfbf;
    overflow: hidden;
}

.my-search-box a i {
    width: 13px;
}

Answer 2

我用div替换span并在其中添加display：inline-block css解决了这个问题。

我不知道究竟是什么问题。也许是关于跨度的高度？想知道究竟是什么原因。