4

我的浏览器（Chrome 和 Firefox）在http://204.197.252.143/~themainr.

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

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

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

在此处输入图像描述

这个在 Firefox 中：

在此处输入图像描述

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

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

4

3 回答 3

8

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

通过将搜索文本框的字体大小从 25 像素更改为 24 像素，我能够获得所需的结果。在 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;
}
于 2013-04-29T00:24:22.437 回答
4

您应该设置搜索框的高度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%;
}
于 2013-04-29T00:29:36.930 回答
2

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

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

请享用

于 2013-04-29T00:28:14.017 回答