调整大小时元素重叠

Question

我的博客页面出现问题2无论我做什么，元素都重叠。我试图使元素“阻止”，“内联阻止”，并没有任何区别。试图用左，右，填充边距来做它......

以下是调整窗口大小时的结果：http://imgur.com/a/RGkkQ

这是我的代码：

PS：我不想使用查询，因为我必须为不同的浏览器尺寸制作6-7，请帮助：）

/***********************************************
                Search-Trigger
************************************************/
.search-trigger {
  position: absolute;
  right:0.5em;
  top: 30px;
  width: 40px;
  text-align: center;
  cursor:pointer;
  cursor:hand;
display:block;
}
@media screen and (min-width: 40em) {
  .search-trigger {
    right: 0.8em;
  }
}
@media screen and (min-width:783px){
.search-trigger{
top:26px;
}
}
.search-trigger:before {
  width: 100%;
  display: block;
  font-family: "ElegantIcons";
  font-weight: normal;
  text-align: center;
  content: "\55";
}
.search-trigger:before::after {
  clear: both;
  content: "";
  display: table;
}
.search-trigger.search-form--active:before {
  font-size: 1.6em;
  line-height: .9em;
  content: "\4d";
} 
/***********************************************
                Tablet-menu-icon
************************************************/
.tablet-icon{
  position: absolute;
display:block;
left:90%;
  top: 23px;
  width: 40px;
}
.tablet-icon:before{
  width: 100%;
font-size:1.6em;
display:block;
  font-family: "ElegantIcons";
  font-weight: bold;
  text-align: center;
  content: "\61";
}
.tablet-icon:before::after{
clear:both;
  content: "";
}
.tablet-icon.form-active:before{
position:relative;
top:6px;
  font-size: 1.6em;
  line-height: .9em;
  content: "\4d";
}
@media screen and (min-width:1001px){
.tablet-icon{
display:none;
}
}
@media screen and (min-width:783px){
.tablet-icon{
top:19px;
}

<span class="tablet-icon"></span>
<a id="search-trigger" class="search-trigger"></a>
     <?php get_search_form(); ?>