Google Chrome CSS位置不正確

我有一個登錄表單，在所有其他瀏覽器中都是完全正確的。但是，有時它會在Google Chrome中扭曲。有時它顯示正確 - 但幾乎總是不正確的。Google Chrome CSS位置不正確

Google Chrome print of the problem.

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

來源

2014-03-06 Filipi Silva

你可以發佈你的html代碼在jsfiddle嗎？ –

發佈您的網絡標記 – bdrx

jsfiddle @AndréFigueiredohttp://jsfiddle.net/n23fh/ –

你應該使用這些圖像作爲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/

來源

2014-03-06 03:48:38

我做了同樣的程序，但仍然在谷歌瀏覽器中，即使在新規則中使用新的CSS和HTML，並且因爲它在Google Chrome瀏覽器中存在問題，因爲我在頁面上給F5的時間有40％是正確的？和60％是不正確的，沒有解決方案。 –

Google Chrome CSS位置不正確

回答

相關問題