html - Chrome没有正确定位按钮

Question

嘿伙计们，我的按钮定位有问题。似乎所有浏览器都能正常运行，我只是 chrome 有问题。

以下是图像示例：

查看 Chrome 的图片，它与左侧的框没有正确对齐。（看盒子的顶部，它比左边的盒子高1-2px）

这是我用于左侧框和输入按钮的代码：

#main_pres_search input[type=text] {
    width: 660px;
    float: left;
    border: 0;
    background-color: #F8F8F8;
    padding: 10px;
    border: 1px solid #C0C0C0;
    border: 1px solid #C0C0C0;
    margin-right: 10px;
    outline: 0;
    line-height: 1;
}
#main_pres_search input[type=button] {
    border: 0;
    background-color: #2a94d8;
    color: #fff;
    font-size: 16px;
    height: 37px;
    width: 48px;
    float: left;
    line-height: 1;
}

这是我用过的 HTML 代码——没什么特别的。=)

<input type="text" name="query">
<input type="button" name="do_search" value="Go!">

有任何想法吗？

Answer 1

尝试将margin-top按钮（可能还有其父级）的（和其他边距值）设置为 0。

每个浏览器都有自己的用户代理样式表。这会导致轻微的格式差异。

您可能还想查看Yahoo 的 Reset CSS。它将几个 css 规则重置为非常基本的值。这使您可以完全控制网站样式。