翻轉時的圖像歪斜 - 無法弄清楚爲什麼

Question

在我的CSS中有些東西顯然是關閉的，但我不能爲我的生活弄清楚什麼。我有2個div代表前後箭頭。我改變背景：懸停。圖像完美地排列在Photoshop中，但在瀏覽器中：懸停圖像顯示稍微偏移和偏斜。

網站是在這裏（圖像前進/後退的投資組合）：

http://66.147.244.91/~warpain3/portfolio_identity/

對於它的價值，這裏是從Chrome中Devloper工具的CSS的快照：

：哈弗

element.style { 
} 
Matched CSS Rules 
nggallery.css:271 
.ngg-imagebrowser-nav .next a:hover { 
background: url('../images/forward_arrow_hover.png') top left no-repeat; 
width: 40px; 
} 
nggallery.css:230 
.format_text .ngg-imagebrowser-nav a:hover { 
text-decoration: none; 
} 
nggallery.css:261 
.ngg-imagebrowser-nav .next a { 
float: right; 
border: none; 
margin-right: 0px; 
padding: 0px 0px; 
width: 40px; 
height: 29px; 
background: url('../images/forward_arrow.png') top left no-repeat; 
} 
nggallery.css:226 
.format_text .ngg-imagebrowser-nav a { 
text-decoration: none; 
} 
style.css:126 
.format_text a:hover { 
text-decoration: none; 
} 
style.css:125 
.format_text a { 
text-decoration: underline; 
} 
style.css:50 
a, a:hover { 
text-decoration: none; 
} 
layout.css:281 
a, h2 a:hover, #logo a:hover { 
color: #2361A1; 
} 
style.css:50 
a, a:hover { 
text-decoration: none; 
} 
style.css:36 
* { 
padding: 0; 
margin: 0; 
} 
user agent stylesheet 
a:-webkit-any-link { 
color: -webkit-link; 
text-decoration: underline; 
cursor: auto; 
} 
Inherited from div.format_text 
layout.css:125 
.format_text { 
font-size: 1.4em; 
line-height: 1.571em; 
} 
Inherited from body.custom.portfolio_identity 
custom.css:7 
body.custom { 
font-family: Helvetica; 
color: #60483C; 
} 
layout.css:279 
body { 
color: #111; 
} 
layout.css:81 
body { 
font-family: Georgia, "Times New Roman", Times, serif; 
} 
style.css:35 
body { 
font-size: 10px; 
} 

非懸停：

element.style { 
} 
Matched CSS Rules 
nggallery.css:261 
.ngg-imagebrowser-nav .next a { 
float: right; 
border: none; 
margin-right: 0px; 
padding: 0px 0px; 
width: 40px; 
height: 29px; 
background: url('../images/forward_arrow.png') top left no-repeat; 
} 
nggallery.css:226 
.format_text .ngg-imagebrowser-nav a { 
text-decoration: none; 
} 
style.css:125 
.format_text a { 
text-decoration: underline; 
} 
layout.css:281 
a, h2 a:hover, #logo a:hover { 
color: #2361A1; 
} 
style.css:50 
a, a:hover { 
text-decoration: none; 
} 
style.css:36 
* { 
padding: 0; 
margin: 0; 
} 
user agent stylesheet 
a:-webkit-any-link { 
color: -webkit-link; 
text-decoration: underline; 
cursor: auto; 
} 
Inherited from div.format_text 
layout.css:125 
.format_text { 
font-size: 1.4em; 
line-height: 1.571em; 
} 
Inherited from body.custom.portfolio_identity 
custom.css:7 
body.custom { 
font-family: Helvetica; 
color: #60483C; 
} 
layout.css:279 
body { 
color: #111; 
} 
layout.css:81 
body { 
font-family: Georgia, "Times New Roman", Times, serif; 
} 
style.css:35 
body { 
font-size: 10px; 
} 

非常感謝任何輸入 - 我需要儘快修復此網站！

Answer 1

那麼簡單的答案：

您的兩個圖像是不一樣的尺寸

Answer 2

懸停和不叮無縫的類應該具有相同的風格

把這個：

.ngg-imagebrowser-nav .next a:hover { 

    background: url('../images/forward_arrow_hover.png') top left no-repeat; 
    float: right; 
    border: none; 
    margin-right: 0px; 
    padding: 0px 0px; 
    width: 40px; 
    height: 29px; 

}