Html 如何使用位置：相对于不同的浏览器？或者这不是最好的方法？

我正在创建静态网站，有时使用position:relative。当我在不同的浏览器上测试我的页面时，我得到了一些元素的不同显示，比如高1-2像素或低1-2像素

我该如何解决这个问题，还是应该使用其他方法

想了一些

大口吞下的
包裹，但什么也没找到

例如

HTML：

    <p id="search-form-menu">
        <input type="search" name="search-input" placeholder="Поиск">
        <input type="submit" value="">
    </p>

   input[type='search'] {
      height: 35px;
      width: 250px;
      border: 0px;
      border-radius: 5px;
      position: relative;
      top: -10px;
      padding-left: 15px;
      padding-right: 45px;
   }
   input[type='submit'] {
      height: 35px;
      width: 45px;
      background-color: white;
      border: 0;
      border-left: 3px solid #d1d1d1;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      position: relative;
      top: -10px;
      left: -47px;
      background-image:url("../image/search-loop-2.svg");
      background-position: center;
      background-repeat:no-repeat;
    }

为什么不在提交输入上使用
float
样式

<p id="search-form-menu">
  <input type="search" name="search-input" placeholder="Поиск"/>
  <input type="submit" value=""/>
</p>

创建了一个小提琴并在chrome和ie中使用

为什么不在提交输入上使用
float
样式

<p id="search-form-menu">
  <input type="search" name="search-input" placeholder="Поиск"/>
  <input type="submit" value=""/>
</p>

创建了一个小提琴并在chrome和ie中使用

这里根本不需要使用定位

只需
框大小调整
和
垂直对齐


*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
身体{
背景：#c0ffee；
}
输入[type='search']{
高度：35px；
宽度：250px；
边界半径：5px；
边界：无；
}
输入[type='submit']{
高度：35px；
宽度：45px；
背景色：白色；
边界：无；
左边框：3px实心#d1d1；
边框右上角半径：5px；
边框右下半径：5px；
垂直对齐：中间对齐；
}

这里根本不需要使用定位

只需
框大小调整
和
垂直对齐


*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
身体{
背景：#c0ffee；
}
输入[type='search']{
高度：35px；
宽度：250px；
边界半径：5px；
边界：无；
}
输入[type='submit']{
高度：35px；
宽度：45px；
背景色：白色；
边界：无；
左边框：3px实心#d1d1；
边框右上角半径：5px；
边框右下半径：5px；
垂直对齐：中间对齐；
}

@Paulie\u D好的，是吗it@Paulie_D好的，是吗