Chrome没有正确定位按钮 [英] Chrome not positioning button properly

问题描述

嘿家伙，我的定位我的按钮有问题。看起来所有的浏览器都能正常使用，我只是遇到了chrome问题。

以下是图片示例：

看看Chrome的图片，它与左侧的框不正确对齐。 （看看盒子的顶部，它在左边框上方1-2px）

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

  #main_pres_search input [type = text] {
 width：660px; 
 float：left; 
 border：0; 
背景颜色：＃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; 
背景颜色：＃2a94d8; 
颜色：#fff; 
 font-size：16px; 
 height：37px; 
 width：48px; 
 float：left; 
 line-height：1; 
} 
  

这是我用过的HTMl代码 - 没什么特别的。 =）

 < input type =textname =query> 
< input type =buttonname =do_searchvalue =Go！> 
  

有什么想法？

解决方案

尝试将按钮（可能是其父母）的 margin-top （和其他保证金值）设置为0。 b
$ b

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

您也可能想查看雅虎重置CSS 。它将几个css规则重置为非常基本的值。这使您可以完全控制网站的风格。

Hey guys I gotta problem with positioning my button. It appears all browsers do it properly, I just have a problem with chrome.

Here are image examples:

Look at the picture of Chrome, its not properly aligned with the box on the left. (look at the top of the box, its above the box on the left by 1-2px)

This is the code I've used for the box on the left and the input button:

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

And this is HTMl code I've used - nothing special. =)

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

Any ideas?

解决方案

try to set margin-top (and the other margin values)for the button (and probably its parents) to 0.

Each browser has its own user agent style sheet. This results in slight format differences.

You also might want to check out Yahoo's Reset CSS. It resets several css rules to very basic values. This gives you full control over the website style.

这篇关于Chrome没有正确定位按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！