输入框和按钮不匹配IE和Firefox

我有一个搜索框在我正在做的页面顶部，我一直在试图使页面跨浏览器友好以及有一个灵活的页面分辨率。输入框和按钮不匹配IE和Firefox

我也碰到过这个问题

的按钮，输入框不水平排队。无论我将其更改为其中一个在另一个浏览器上总是与另一个不同。

有谁知道跨浏览器友好的解决方案吗？

HTML

<div id='search'> 
       <form> 
        <input class='search' type="text" placeholder="what would you like to find?" required> 
        <input class='button' type="button" value="search"> 
       </form> 
      </div>

CSS

#search { 
    padding-left:200px; 
    margin-right:5px; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 12px; 
    } 

.search { 
    margin-top:5px; 
    padding:4px 15px; 
    width:250px; 
    background:#FFF; 
    border:none; 
    color:#232d38; 
    } 

.button { 
    position:relative; 
    padding:4px 15px; 
    left:-4px; 
    border:none; 
    background-color:#FFF; 
    color:#232d38; 
    } 

.button:hover { 
    border:none; 
    background-color:#FFF; 
    color:#000; 
    }

来源

2014-09-24 John Doe

Firefox对输入（任何类型）的输入行高都不好用。 – 2014-09-24 05:07:15

抓痕！显然，他们决定在最新版本中实现这一点。只需将font-size：12px添加到每个输入。 – 2014-09-24 05:15:51

没有工作。另一方面，较小的字体看起来更好。 – 2014-09-24 06:17:01

我已经找到了解决办法。

问题归结于浏览器的默认样式。 Mozilla的，在他们无穷的智慧，都选择把此行中他们的CSS：

button, input[type="reset"], input[type="button"], input[type="submit"] { 
line-height:normal !important; 
}

在Firefox中，按钮得到额外的2px填充。在所有其他浏览器中，他们没有。所以不可能仅仅使用填充来匹配它们。

您必须将顶部和底部填充设置为0px，并使用height: 25px; vertical-align: middle;来弥补填充损失。

来源

2014-09-24 17:46:29

我有这个相同的问题，并使用约翰的答案上面提出一个解决方案，而不必使用高度和vertical-align属性。

在我的复位样式中，我基本做到了让所有输入都具有正常的行高，这样Chrome就可以像Firefox和IE一样渲染。这个和John的代码之间的重要补充是针对一般的输入选择器：

button, input[type="reset"], input[type="button"], input[type="submit"], input 
{ 
line-height:normal !important; 
}

来源

2017-11-09 21:11:51 Danielle

输入框和按钮不匹配IE和Firefox

回答

相关问题