1

我需要一个在所有浏览器中看起来都一样的内联等高搜索表单。

http://codepen.io/mdmoura/pen/BcIFm

目前我有以下 HTML 标记：

<form method="get" action="#">
  <input type="search"/><input type="submit" value="Search"/>
</form>

以及以下 CSS (LESS)：

form {

  box-sizing: border-box; 
  white-space: nowrap;
  padding: 20px 116px 20px 0;

  border: 1px solid red;
  width: 40%;

  input {

    display: inline-block;
    box-sizing: border-box;

    &[type="search"] {
      background-color: aqua;
      border: 1px solid aqua;
      font-size: 24px;
      padding: 8px;
      width: 100%;     
    }

    &[type="submit"] {
      background-color: #404040;
      border: 1px solid #404040;      
      color: white;
      font-size: 24px;
      padding: 8px;      
      width: 100px;
    }

    &:-moz-focus-inner {
      border: 0;
      padding: 0;
    }    

  } // input

} // form

问题：

FIREFOX：按钮的顶部和底部似乎多了一个像素；

IE 9、IE10：右侧有一个填充。不知道为什么...

CHROME：与 IE 10 中的相同 - 右侧有一个填充。

萨法里：更糟。提交输入高于搜索输入。就像在 IE 10 和 Chrome 中一样，有一个正确的填充。

使用 Normalize.css 时全部解决 使用溢出：隐藏在表单上似乎也可以更好地对齐边框。

有人可以帮我改进这种形式并解决问题吗？

谢谢你，米格尔

4

1 回答 1

0

您遇到的所有填充问题都源于您构建具有较大右填充的表单 div 的方式。

一个想法是摆脱正确的填充，并更改“搜索”和“提交”输入，使它们的宽度等于 100%，而不是两者都是 100%。例如，如果它们是 80% 和 20%，则您不应该在表单上需要较大的右填充。然后你可以在它们周围设置一个边距或在它们和红线之间添加空间。

于 2013-09-13T14:33:21.467 回答