0

我的 CSS 中显然有些问题,但我一生都无法弄清楚是什么。我有 2 个 div 代表一个前进和后退箭头。我在 :hover 上更改背景。这些图像在 Photoshop 中完美排列,但是在浏览器中,:hover 图像出现轻微偏移和倾斜。

网站在这里(图片是作品集的前进/后退):

http://66.147.244.91/~warpain3/portfolio_identity/

值得一提的是,这是来自 Chrome 开发者工具的 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;
}

非常感谢您的任何意见 - 我需要尽快修复这个网站!

4

2 回答 2

0

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

把这个:

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

}
于 2011-10-28T00:18:56.297 回答
0

好简单的答案:

你的两张图片大小不一样

于 2011-10-28T00:31:57.120 回答