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

我在

中遇到了浏览器（Chrome和Firefox）之间css不一致的问题http://204.197.252.143/~themainr

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

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

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

这一个在firefox中：

我试着将浮动调整到搜索区域的右侧，但它只是弄乱了它的外观

---

有什么好的技术可以正确地显示它吗？

哈哈，世界上所有的工具都不能代替偶尔玩它

通过将搜索文本框的字体大小从25px更改为24px，我能够获得所需的结果。在firefox和chrome中，我觉得都不错

我可以通过firefox的firebug和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;
}

---

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

---

享受

您应该设置

输入

搜索框的高度，您可以通过设置其

字体大小

属性或设置其

高度

属性来实现这一点，这样可以确保在两个浏览器中呈现相同的高度

要清除右侧多余的空间并将搜索框与其下方的菜单对齐，请在

上设置
浮动：right
。菜单主菜单容器

：

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%;
}

---

如果没有CSS代码的问题将很难帮助。只要有问题的部分的css就可以了。您可能缺少-moz-identifier/s。此外，所讨论的html元素也非常复杂useful@Nomad101他提供了实时URL…我只是说，确切的css和html问题将有助于人们的反应是所有。例如，我不喜欢访问ip地址。我已经编辑了我的问题标题。事实上，这种情况对我来说是新的。我想我缺少一些基本的定位。但是这个场景是特定的，我真的不知道是什么元素导致了不正确的显示。我用wordpress来做这个。也许这里的css专业人士可以指出我的错误。希望能在这个网站上解决这个问题，因为这里有很多专家：）哦，我明白你的意思了。是的，这需要大量的价值观游戏。这只是如何做更好的调整。是的。我同意。实际上我只使用了我知道的css。谢谢你的建议。还在修改我的code@Kenneth：哇。成功了。非常感谢你的建议。但我仍然需要让搜索文本框与下面的边栏对齐。谷歌是你的朋友。。。firebug和chrome开发者工具也是如此@杰德，检查我的答案，它解决了你的对齐问题。谢谢，但我已经试过了。但它不起作用。我尝试的解决方案来自肯尼思，它奏效了。不过，非常感谢你。：）谢谢，这个解决方案完全正确地回答了我的问题。使用您的解决方案编辑站点的响应部分对我来说更容易：）

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%;
}