CSS文本和图像翻转：两个问题 [英] CSS text and image rollovers: two issues
问题描述
我的网站上有一些错误，我不确定如何修复。我是
使用简单的CSS进行文本翻转和我的水平导航栏，并且
这里发生了什么。首先，网站：
www.sunbadgeco.com /sunmetal/index.htm
＃1 {
在IE6中，滚动导航栏中的图像使其轻。起来。点击
图像将您带到另一个页面（未完成）。然后单击
后退按钮可保持刚刚点击的图像点亮。起来，这就是
的问题。如果你然后点击屏幕，图像行为将返回
正常。
它与底部的文本翻转相同。点击链接
可以正确显示页面，但单击返回按钮可以在链接上显示
下划线。
这在Mozilla FireFox 0.8中不会发生！它似乎工作正常...
}
＃2 {
在Mozilla Firefox 0.8（最新版）中，导航栏图像无法完全显示
- 除了图像底部的一个小透明条，
我可以看到翻转确实有效。但几乎所有这些都是黑色的。
然而，上面的问题是链接保持在活跃状态。用这个浏览器点击后退按钮的后退状态
}
NavBar CSS（我有一个透明的1x1px .gif与图像尺寸相同
这样_inactive状态图像出现在网站上，直到你将鼠标悬停在
之上）：
a＃artists：link，a＃artists：visited {
background：＃000 url（../ images / artists_inactive.jpg）no-repeat;
}
a＃artists：hover，a＃artists：active {
background：＃000 url（../ images / artists_active.jpg）no-repeat;
}
等，包括联系方式和图片。
I''ve got a couple of errors on my site that I''m not sure how to fix. I''m
using simple CSS for both text rollovers and my horizontal navbar, and
here''s what happens. First, the site:
www.sunbadgeco.com/sunmetal/index.htm
#1 {
In IE6, rolling over an image in the navbar makes it "light" up. Clicking on
the image takes you to another page (which is not finished). Then clicking
the Back button keeps the image you just clicked on "lit" up, and that''s the
problem. If you then click on the screen, the image behavior returns to
normal.
It''s the same with the text rollover at the bottom. Clicking on a link
brings you correctly to the page, but clicking the Back button keeps the
underline on the link.
This does not happen in Mozilla FireFox 0.8! It appears to work fine...
}
#2 {
In Mozilla Firefox 0.8 (latest), the navbar images fail to appear
completely - except for a small transparent bar at the bottom of the image,
where I can see that the rollover does indeed work. But nearly all of it is
black.
Yet, the above problem with the links remaining in "active" state after
hitting the Back button are gone with this browser.
}
The NavBar CSS (I have a transparent 1x1px .gif the same size as the image
so that the _inactive state image appears on the site until you hover over
it):
a#artists:link, a#artists:visited {
background: #000 url(../images/artists_inactive.jpg) no-repeat;
}
a#artists:hover, a#artists:active {
background: #000 url(../images/artists_active.jpg) no-repeat;
}
etc. with contact and about images.
推荐答案
" Applebrown" < AP ******** @ gamebanshee.takethis.andthisout.com>写道：
"Applebrown" <ap********@gamebanshee.takethis.andthisout.com> wrote:
我的网站上有一些错误，我不知道如何修复。我正在使用简单的CSS同时进行文本翻转和水平导航栏，
这里发生了什么。首先，网站：
www.sunbadgeco.com /sunmetal/index.htm
＃1 {
在IE6中，滚动导航栏中的图像使其轻。起来。点击
图像将您带到另一页（未完成）。然后单击
后退按钮可使您刚刚点击的图像保持点亮状态。起来，这就是问题所在。如果然后单击屏幕，图像行为将恢复正常。
底部的文本翻转与此相同。单击链接
会正确地将您带到页面，但单击返回按钮会在链接上显示
下划线。
这在Mozilla FireFox 0.8中不会发生！它似乎工作正常...
}
这是IE中的正常行为。如果你点击链接并返回
链接仍然处于活动状态（因此任何：活动样式将
适用）。至少某些版本的Opera表现方式相同，Gecko和
其他浏览器没有。
＃2 {
在Mozilla Firefox 0.8（最新版）中，导航栏图像无法完全显示 - 除了图像底部的小透明条，
我可以看到翻转确实有效。但几乎所有这些都是黑色的。
然而，上面的问题是链接保持在活跃状态。点击后退按钮后的状态已经消失了。这个浏览器。
NavBar CSS（我有一个透明的1x1px .gif与图像大小相同
所以_inactive状态图像出现在网站上，直到你将鼠标悬停在
它上面：
a＃artists：link，a＃artists：visited {
background：＃000 url （../images/artists_inactive.jpg）no-repeat;
}
a＃artists：hover，a＃artists：active {
background：＃000 url（../ images / artists_active.jpg）no-repeat;
}
I''ve got a couple of errors on my site that I''m not sure how to fix. I''m
using simple CSS for both text rollovers and my horizontal navbar, and
here''s what happens. First, the site:
www.sunbadgeco.com/sunmetal/index.htm
#1 {
In IE6, rolling over an image in the navbar makes it "light" up. Clicking on
the image takes you to another page (which is not finished). Then clicking
the Back button keeps the image you just clicked on "lit" up, and that''s the
problem. If you then click on the screen, the image behavior returns to
normal.
It''s the same with the text rollover at the bottom. Clicking on a link
brings you correctly to the page, but clicking the Back button keeps the
underline on the link.
This does not happen in Mozilla FireFox 0.8! It appears to work fine...
}
This is normal behaviour in IE. If you click on a link and the go back
the link is still in the active state (hence any :active styles will
apply). At least some version of Opera behave the same way, Gecko and
other browsers do not.
#2 {
In Mozilla Firefox 0.8 (latest), the navbar images fail to appear
completely - except for a small transparent bar at the bottom of the image,
where I can see that the rollover does indeed work. But nearly all of it is
black.
Yet, the above problem with the links remaining in "active" state after
hitting the Back button are gone with this browser.
}
The NavBar CSS (I have a transparent 1x1px .gif the same size as the image
so that the _inactive state image appears on the site until you hover over
it):
a#artists:link, a#artists:visited {
background: #000 url(../images/artists_inactive.jpg) no-repeat;
}
a#artists:hover, a#artists:active {
background: #000 url(../images/artists_active.jpg) no-repeat;
}
您已将父元素的行高设置为1px。所以
链接只有1px高。您在行框外面溢出了间隔GIF，但是背景图片仅应用于< a>
元素本身，这仅限于线路框。
史蒂夫
-
我的理论给你起见，我的异端邪说激怒了你，
我从不回信，你也不喜欢我的领带。 - 医生
Steve Pugh< st *** @ pugh.net> < http://steve.pugh.net/>
You''ve set the line-height for the parent element to 1px. So there
links are only 1px tall. The spacer gifs you''ve included spill outside
of the line box but the background image is only applied to the <a>
element itself which is constrained to the line box.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don''t like my tie." - The Doctor
Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
" Steve Pugh" < ST *** @ pugh.net>在消息中写道
news：e2 ******************************** @ 4ax.com ...
"Steve Pugh" <st***@pugh.net> wrote in message
news:e2********************************@4ax.com...
" Applebrown" < AP ******** @ gamebanshee.takethis.andthisout.com>写道：
"Applebrown" <ap********@gamebanshee.takethis.andthisout.com> wrote:
我的网站上有一些错误，我不知道如何修复。我正在使用简单的CSS同时进行文本翻转和水平导航栏，
这里发生了什么。首先，网站：
www.sunbadgeco.com /sunmetal/index.htm
＃1 {
在IE6中，滚动导航栏中的图像使其轻。起来。单击图像上的
会将您带到另一个页面（未完成）。然后单击返回按钮
可使您刚刚点击的图像保持点亮状态。起来，这是问题的
。如果然后单击屏幕，图像行为将恢复正常。
底部的文本翻转与此相同。单击链接
会正确地将您带到页面，但单击返回按钮会在链接上显示
下划线。
这在Mozilla FireFox 0.8中不会发生！它似乎工作正常......
}这是IE中的正常行为。如果您点击链接并返回
链接仍然处于活动状态（因此任何：活动样式将适用）。至少某些版本的Opera表现方式相同，Gecko和
其他浏览器没有。
I''ve got a couple of errors on my site that I''m not sure how to fix. I''m
using simple CSS for both text rollovers and my horizontal navbar, and
here''s what happens. First, the site:
www.sunbadgeco.com/sunmetal/index.htm
#1 {
In IE6, rolling over an image in the navbar makes it "light" up. Clicking onthe image takes you to another page (which is not finished). Then clickingthe Back button keeps the image you just clicked on "lit" up, and that''s theproblem. If you then click on the screen, the image behavior returns to
normal.
It''s the same with the text rollover at the bottom. Clicking on a link
brings you correctly to the page, but clicking the Back button keeps the
underline on the link.
This does not happen in Mozilla FireFox 0.8! It appears to work fine...
}
This is normal behaviour in IE. If you click on a link and the go back
the link is still in the active state (hence any :active styles will
apply). At least some version of Opera behave the same way, Gecko and
other browsers do not.
有解决方法吗？我宁愿它按预期工作。
Is there a workaround for it? I''d rather that it works as intended.
＃2 {
在Mozilla Firefox 0.8（最新版）中，导航栏图像失败完全出现 - 除了
图像底部的一个小透明条，我可以看到翻转确实有效。但几乎所有的都是
isblack。
然而，上述问题仍然存在于活跃状态。点击后退按钮后的状态已经消失了。这个浏览器。
NavBar CSS（我有一个透明的1x1px .gif与
imageso相同的尺寸_inactive状态图像出现在网站上，直到你徘徊
overit）：
a＃artists：link，a＃artists：visited {
background：＃000 url（。 ./images/artists_inactive.jpg）no-repeat;
}
a＃artists：hover，a＃artists：active {
background：＃000 url（../ images / artists_active。 jpg）no-repeat;
}
#2 {
In Mozilla Firefox 0.8 (latest), the navbar images fail to appear
completely - except for a small transparent bar at the bottom of the image,where I can see that the rollover does indeed work. But nearly all of it isblack.
Yet, the above problem with the links remaining in "active" state after
hitting the Back button are gone with this browser.
}
The NavBar CSS (I have a transparent 1x1px .gif the same size as the imageso that the _inactive state image appears on the site until you hover overit):
a#artists:link, a#artists:visited {
background: #000 url(../images/artists_inactive.jpg) no-repeat;
}
a#artists:hover, a#artists:active {
background: #000 url(../images/artists_active.jpg) no-repeat;
}
您已将父元素的行高设置为1px。所以
链接只有1px高。您在行框外面包含溢出的间隔Gif，但背景图像仅应用于受限于行框的< a>
元素。
You''ve set the line-height for the parent element to 1px. So there
links are only 1px tall. The spacer gifs you''ve included spill outside
of the line box but the background image is only applied to the <a>
element itself which is constrained to the line box.
谢谢，我肯定会解释它，但是如何在FireFox中修复它以及为什么
它在IE中是否有效？
史蒂夫
-
我的理论给你起见，我的异端邪说激怒了你，
我从不回信，你也不喜欢我的领带。 ; - 医生
Steve Pugh< st *** @ pugh.net> < http://steve.pugh.net/>
Thanks, I''m sure that explains it, but how do I fix it in FireFox and why
does it work in IE?
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don''t like my tie." - The Doctor
Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
" Applebrown" < AP ******** @ gamebanshee.takethis.andthisout.com>写道：
"Applebrown" <ap********@gamebanshee.takethis.andthisout.com> wrote:
" Steve Pugh" < ST *** @ pugh.net>写道：
"Steve Pugh" <st***@pugh.net> wrote:
这是IE中的正常行为。如果您点击链接并返回
链接仍然处于活动状态（因此任何：活动样式将适用）。至少某些版本的Opera的行为方式相同，Gecko和
其他浏览器没有。
This is normal behaviour in IE. If you click on a link and the go back
the link is still in the active state (hence any :active styles will
apply). At least some version of Opera behave the same way, Gecko and
other browsers do not.
是否有解决方法？我宁愿它按预期工作。
Is there a workaround for it? I''d rather that it works as intended.
否。它正在按照浏览器制造商的意图运行。唯一的方法是不使用IE或Opera作为浏览器。那些
浏览器的用户可能习惯于以这种方式工作，并且没有任何问题。
No. It is working as intended by the browser manufacturer. The only
way around is to not use IE or Opera as your browser. Users of those
browsers are presumably used to it working this way and don''t have any
problem with it.
您已将父元素的行高设置为1px。所以
链接只有1px高。您在行框外面包含溢出的间隔Gif，但背景图像仅应用于受限于行框的< a>
元素。
You''ve set the line-height for the parent element to 1px. So there
links are only 1px tall. The spacer gifs you''ve included spill outside
of the line box but the background image is only applied to the <a>
element itself which is constrained to the line box.
谢谢，我肯定会解释它，但是如何在FireFox中修复它以及为什么它在IE中工作？
Thanks, I''m sure that explains it, but how do I fix it in FireFox and why
does it work in IE?
不仅仅是Gecko，Opera也只显示部分图像（虽然
超过1px，可能是由于我的最小字体大小设置）。
拿出线高：1px;并设置< a>的高度元素
到背景图像的高度。你可能还需要调整一些
其他东西。
IE错了。 IE就是这么做的。很多。
Not just Gecko, Opera also displays only part of the image (though
more than 1px, possibly due to my minimum font-size setting).
Take out the line-height: 1px; and set the height of the <a> elements
to the height of the background image. You may need to tweak a few
other things as well.
IE gets it wrong. IE does that. A lot.
我的理论给你起见，我的异端邪说你，
我从不回信，你不喜欢我的领带。 - 医生
Steve Pugh< st *** @ pugh.net> < http://steve.pugh.net/>
"My theories appal you, my heresies outrage you,
I never answer letters and you don''t like my tie." - The Doctor
Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
您是否非常喜欢我的签名，您必须将其引回
每个人？
史蒂夫
-
"抓住现实球并且挤压。 - Tempus Thales
Steve Pugh< st *** @ pugh.net> < http://steve.pugh.net/>
Did you like my signature so much you had to quote it back to
everyone?
Steve
--
"Grab reality by the balls and squeeze." - Tempus Thales
Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
这篇关于CSS文本和图像翻转：两个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
