谷歌Chrome CSS位置不正确

Question

我有一个在所有其他浏览器中完全正确的登录表单。但是，有时它会在Google Chrome中扭曲。有时它会正确显示 - 但几乎总是不正确。

CSS

* {
    margin: 0;
    padding: 0;
    width: auto;
}

body {
    background: #E8E8E8;
}

#logo {
    width: 244px;
    height: 70px;
    margin: 0 auto;
    border: 0;
    background: url(../img/logo.png) no-repeat;
}

#loginbox {
    width: 330px;
    height: auto;
    border: 1px solid  #6A6A6A;
    background: url(../img/bg-top-login.png) repeat-x;
    margin: 0 auto;
    padding: 5px;
    border-radius: 5px 5px 0 0;
    margin-top: 80px;
    box-shadow: 0 0 10px #828282;
    -webkit-box-shadow: 0 0 10px #828282;
    -moz-box-shadow: 0 0 10px #828282;
}

Answer 1

您应该将这些图像用作css背景：

<p class="textlogin">Usuario</p>
<input type="text" placeholder="Digite Seu Nome de úsuario" name="usuario" />
<div class="ico"><i class="usuario"></i></div>

<p class="textlogin">senha</p>
<input type="password" placeholder="Digite a senha da conta" name="senha" />
<div class="ico"><i class="senha"></i></div>

CSS：

.ico i {
     display: block;
       width:20px;
       height:20px;
       margin-top:2px;
       margin-left:4px;
}
.ico i.usuario {
    background-image: url('http://s12.postimg.org/ad8v4wvex/user.png');
}
.ico i.senha {
    background-image: url('http://s13.postimg.org/iexiozs83/loked.png');
}

你的CSS也有一个不正确的属性.ico类，这可能是打破布局的原因：

.ico{
    top:-12px;);

如果未加载背景渐变图像，您还应该考虑使用背景颜色作为后备：

.ico{
background:#eee url(../img/bg-ico.png) repeat-x;
}

请参阅更新的小提琴：http://jsfiddle.net/n23fh/3/