翻转时的图像歪斜 - 无法弄清楚为什么

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; 

}