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's Reset CSS .它将几个 css 规则重置为非常基本的值。这使您可以完全控制网站风格。