html - 搜索框上的 IE css 对齐问题

Question

我正在尝试对齐搜索按钮和搜索框，我可以在谷歌浏览器中使用此功能，但不能在 IE 或移动版 Safari/Chrome 中使用。

我使用的 CSS 是:

#search input {
  background: none repeat scroll 0 0 #fff;
  padding: 10px;
  border: 0 none;
  color: #7F7F7F;
  font: 20px 'Open Sans', sans-serif;
  transition: background 0.3s ease-in-out 0s;
  width: 500px;
  height: 40px;
  margin: 0 auto;
  display: inline-block;
}

#search button {
padding: 21px;
  background: url("search.png") no-repeat scroll center center #7eac10;
  cursor: pointer;
  height: 60px;
  text-indent: -99999em;
  transition: background 0.3s ease-in-out 0s;
  width: 60px;
  border: 2px solid #fff;
  margin: 0 auto;
  display: inline-block;
  margin-top: 3%;
}

HTML:

<form id="search" action="/index.php">
> 
> <p><b></b> <input type="text" class="search" placeholder="Enter A
> Domain Name or IP address."name="domain" id="domain" value=""> 
> <button value="lookup"></p></button> </form>

任何帮助将不胜感激!

网址是http://rapidwhois.uk

Answer 1

请尝试:

#search button, #search input {
vertical-align: middle;
}