作者logs ()
看板Web_Design
标题[问题] 改变超连结 href 底线颜色?
时间Wed Jun 14 03:49:09 2006
请问要如何作出不同於文字颜色的底线?
这里有个很简单的范例：
http://www.google.com.tw/
就是上面这个，有用 PCMan / KKMan 等等的程式浏览 ptt 时应该就会看到了
我查过文件，上头写道:
超连结的底线颜色 text-decoration 属性沿自 color (昏倒...)
也就是说，假若 color:red
那麽 text-decoration:underline 的颜色也是 red
那有没有什麽替代方案，可以作出上面的那种效果呢？
我有试过用框线去模拟
可是发生一些问题...望请指教
=============================================================================
<style>
.pseudoline {
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #ff8000}
A:link,A:visited,A:hover,A:active {text-decoration: none}
.hahapoint {text-decoration: underline}
</style>
<h1><a href=# class=pseudoline>测试</a><span class=hahapoint>文字</span></h1>
=============================================================================
以上直接复制即可进行测试，然後这样做出来的效果就很像了
但很不幸地，发生 IE 与 Firefox 的「互不相容性」问题
用 IE 开启网页，会出现「虚拟底线」比较低的状况
而 Firefox 则是与 underline 相近位置
请比较一下：
IE 之中，「测试」的底线会比「文字」的底线要低一点
Firefox 会差不多高
倘若框线是唯一的替代方案，有没有办法让 IE 的框线位置再高一点?
PS: 因为这在使用 line-height:100% 的时候会发生与下面一行字重叠的现象
只有 IE 会这样，Firefox 不会
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 220.133.248.14
1F：推 pptpb:完全看不懂你的问题啊 XD 用 border 解决吧 06/14 03:55
2F：推 ghostfire:索性把原本的底线也换成框线XD 06/14 06:00
3F：→ ghostfire:不知道压背景图行不行(没时间帮测) 06/14 06:08