Re:文本锚点的翻转问题 [英] Re: Rollover problem with text anchor

查看:103
本文介绍了Re:文本锚点的翻转问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

嗨Roderik


4月15日23:44,Roderik< nos ... @ atall.nlwrote:

Hi Roderik

On 15 Apr, 23:44, Roderik <nos...@atall.nlwrote:


但是现在这可以用CSS(背景属性)完成,

所以不需要用javascript复杂化。


a { ...}


a:悬停{...}
However this can be done with CSS only (background property) these days,
so there is no need to complicate things with javascript.

a {...}

a:hover {...}



图像的位置是相对于

文本的右边缘,根据用户安装的字体以及使用的浏览器和操作系统的价值,该位置会有所不同;怎么可以给文本一个文本右边3px的文本?


Dave

The image''s position is defined relative to the right hand edge of the
text, and depending on the what fonts the user has installed and what
browser and OS the are using, that position would vary; how can one
give text a background image that is 3px to the right of that text?

Dave

推荐答案

Dave Rado写道:
Dave Rado wrote:

>

怎么能一个

给文本一个背景图像,该图像是该文本右侧的3px?
>
how can one
give text a background image that is 3px to the right of that text?



< span> text< / spanor任何适合你的元素


span {

padding-right:[img width + 3px];

background:#fff url(img.png)right center no-repeat;

}


调整味道


-

Berg

<span>text</spanor whatever element suits you

span {
padding-right: [img width + 3px];
background: #fff url(img.png) right center no-repeat;
}

adjust to taste

--
Berg


嗨Bergamot


4月16日00:38,Bergamot< berga ... @ visi.comwrote:
Hi Bergamot

On 16 Apr, 00:38, Bergamot <berga...@visi.comwrote:

< span> ; text< / spanor任何适合你的元素


span {

padding-right:[img width + 3px];

背景:#fff url(img.png)右中心不重复;


}


调整品味
<span>text</spanor whatever element suits you

span {
padding-right: [img width + 3px];
background: #fff url(img.png) right center no-repeat;

}

adjust to taste



我已经在 http://更新了模型tinyurl.com/5vbko5 我的

了解你的建议,它的一半适用于标准 -

兼容的浏览器,并且没有在IE6中完全不起作用,无论是否是b / b
是否处于严格或怪癖模式。


我也做了文字,图像和填充物要大得多,

因为正如约翰所说,这只是'重要的原则。


在标准中 - 兼容的浏览器,如果你将鼠标悬停在我的模拟文件中,文本和图像都会改变颜色,这很好;但如果

将鼠标悬停在图像上,则只有图像会改变颜色而不是

文本。我是否以某种方式错误地实施了您的建议;或者如果

没有,是否有解决方法?


在IE6中,图像根本没有变色。

是否有任何方式可以实现跨浏览器兼容?尽管我希望它不是这样的,但是大约三分之一的用户仍在使用IE6。而且我已经看到了确实达到了我想在IE6中实现的效果的网站,但是我不知道他们是怎么做到的。


Dave


I''ve updated the mock-up at http://tinyurl.com/5vbko5 with my
understanding of your suggestion, and it half works in standards-
compliant browsers, and doesn''t work at all in IE6, regardless of
whether it''s in strict or quirks mode.

I''ve also made the text, the image and the padding much larger,
because as John said, it''s only the principle that''s important.

In standards-compliant browsers, if you hover over the text in my mock-
up, the text and the image both change colour, which is great; but if
you hover over the image, only the image changes colour and not the
text. Did I implement your suggestion incorrectly in some way; or if
not, is there a fix for this?

In IE6, the image doesn''t change colour at all. Is there any way of
doing this that is cross-browser compatible? Much as I wish it weren''t
the case, around a third of all users are still using IE6. And I have
seen sites that do achieve the effect I''m trying to achieve in IE6,
but I don''t know how they did it.

Dave


Dave Rado写道:
Dave Rado wrote:

>

4月16日00:38,Bergamot写道:
>
On 16 Apr, 00:38, Bergamot wrote:

>< span> text< / spanor任何适合你的元素
span {
padding-right:[img width + 3px];
背景:#fff url(img.png)右中心不重复;
}

调整品味
><span>text</spanor whatever element suits you

span {
padding-right: [img width + 3px];
background: #fff url(img.png) right center no-repeat;
}

adjust to taste



我已经在 http://tinyurl.com/5vbko5 我的

了解你的建议,它的一半用于标准 -
$符合b $ b标准的浏览器,并且在IE6中根本不起作用,无论它是否处于严格模式或怪异模式。


I''ve updated the mock-up at http://tinyurl.com/5vbko5 with my
understanding of your suggestion, and it half works in standards-
compliant browsers, and doesn''t work at all in IE6, regardless of
whether it''s in strict or quirks mode.



....并且< span * inside * the< a>?


< p> ;

< a class =" Footer" href =" #Top">

< span class ="测试">一些文字< / span>

< / a>

< / p>


-

John

思考UIP的价值: http://improve-usenet.org/

这篇关于Re:文本锚点的翻转问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆