Question

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

我如何解决问题或者我应该使用别的东西？

考虑了一些gulp包，但没有找到任何内容。

实施例

HTML ：

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

CSS ：

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

Answer 1

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

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

CSS

p#search-form-menu{
  width: 250px;
  height: 35px;
}
input[type='search'] {
  display: inline-block;
  height: 35px;
  width: 205px;
  border: 0px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding-left: 15px;
  padding-right: 15px;
}

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

创造了一个小提琴，让它在chrome和ie。

中工作

https://jsfiddle.net/1r8a2u87/2/

Answer 2

根本不需要在这里使用定位。

只需box-sizing和vertical-align。

＆＃13;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background: #c0ffee;
}
input[type='search'] {
  height: 35px;
  width: 250px;
  border-radius: 5px;
  border: none;
}
input[type='submit'] {
  height: 35px;
  width: 45px;
  background-color: white;
  border: none;
  border-left: 3px solid #d1d1d1;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  vertical-align: middle;
}

＆＃13;

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

＆＃13;

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

2 个答案: