Question

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

目前我有以下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相同 - 右侧有填充。

SAFARI：更糟糕。提交输入高于搜索输入。正如在IE 10和Chrome中一样，有一个正确的填充。

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

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

谢谢你，米格尔

Answer 1

你所拥有的填充问题都源于你使用大右填充构造表单div的方式。

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

平等高度响应搜索表

1 个答案: