CSS Firefox与Chrome不一致的高度和位置输出

Question

嗨，大家好我在http://204.197.252.143/~themainr的浏览器（Chrome和Firefox）之间遇到了css不一致的问题。

比较时搜索按钮的高度不相同。

另外，搜索框在firefox中没有很好地对齐，如下图所示：

这是谷歌浏览器中的视图（这是所有浏览器中所需的输出）：

这个是在firefox中：

我尝试将浮动调整到搜索部分的右侧，但它只是弄乱了它的外观。

有没有一种好的技术可以正确显示？

Answer 1

大声笑，世界上所有的工具有时并不会取代它只是玩它。

通过将搜索文本框的字体大小从25px更改为24px，我能够获得所需的结果。在firefox和chrome中，它看起来对我来说都很好。

我能够通过使用firebug for firefox和内置的chrome开发工具来实现这一目标。

学会使用它们，因为它们对于这样的调整非常重要。

祝你好运

编辑我更改内容的更详细示例

li.search input[type="text"] {
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: #ebebeb;
    margin-left: 20px;
    position: relative;
    top: -1px;
    width: 205px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'waukegan';
    font-size: 24px; /*originally font-size: 25px;*/
    padding-top: 2px;
    padding-bottom: 3px;
    padding-left: 8px;
}

Answer 2

您应该设置input搜索框的高度，您可以通过设置其font-size属性或设置其height属性来执行此操作，这可确保其呈现方式相同两种浏览器的高度。

要摆脱右侧的额外空间并将搜索框与其下方的菜单对齐，请在float: right上设置.menu-main-menu-container：

li.search input[type="text"] {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #EBEBEB;
    border: 0 none;
    border-radius: 0 0 0 0;
    font-family: 'waukegan';
    font-size: 25px;        
    margin-left: 20px;
    padding-bottom: 3px;
    padding-left: 8px;
    padding-top: 2px;
    position: relative;
    top: -1px;
    width: 205px;
    height: 32px; /* Add this line */   
}

.menu-main-menu-container {
    float: right; /* Change this line */
    max-width: 94%;
}

Answer 3

只需将此命令添加到当前的css（第203行的style.css文件）

li.search input[type="text"] {
 height: 32px;
}

享受