Question

我的CSS显然有些东西，但我不能为我的生活找出什么。我有2个div代表前后箭头。我改变了背景：悬停。图像在photoshop中完美排列，但在浏览器中：悬停图像略微偏移和倾斜。

网站在这里（图片是投资组合的前/后）：

http://66.147.244.91/~warpain3/portfolio_identity/

对于它的价值，这里是Chrome Devloper Tools的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

悬停而非悬停类应具有相同的样式

把这个：

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

}

Answer 2

简单回答：

你的两张图片尺寸不一样

翻滚图像歪斜 - 无法弄清楚原因

2 个答案: