链接虚线框&选中文本颜色

分类:未分类

1.点击链接或按钮后虚线框

在opera和safari中默认不会产生虚线框。在FF中产生的虚线框颜色是 根据链接颜色而定的,只要位置正确(位置不正确是你自己的问题),是很完美的。IE中虚线框就是默认的黑色,有时会和环境很不搭配,另外当设置line- height时,虚线框的位置还可能不正确。觉的虚线框还是很有必要的,产生的虚线框告诉我们你点击了那个链接,尤其是在响应不快的情况下。最终导致那么 多人想去除虚线框,大部分还是IE的问题。不过比较讽刺的是,越是想去除的,却没有好办法去除;越是比较完美的,却提供去除的方法。其实火狐提供 outline并不只为用户提供去除的方法,而是给用户更大的自定义空间,就像你设置border一样。在大多数情况下,我觉得去除ff中的虚线框根本没 必要,反而把火狐的特性给抹杀了。不过还是那么多人去除,谁让FF中去除简单呢(也许为了统一样式),FF冤啊。

链接虚线框

链接虚线框

在其他浏览器实现虚线框:

a:focus{outline:1px dotted color;}
在opera中可以实现;在win/safari下,是支持outline属性的,但似乎并不能实现:focus,所以并不能实现,不知mac/safari下是否可以,应该行。

虽然如此还是说说去除的方法吧:

1. FF中,a:focus{-moz-outline-style: none;/*FF1.5-*/outline:none; }

2.IE

  • 单个添加IE私有属性hideFocus="true"/onFocus="this.blur()";
    如:<button hideFocus="true">tton without rectangle</button>
    <!– 其实hideFocus="false"同hideFocus="true"一样的效果,IE只要发现存在hideFocus属性即生效,这样写是为了兼容XHTML的属性必须有值的规范 –>
  • 借助expression; a{ blr:expression(this.onFocus=this.blur()) } 
  • 借助htc ;a {behavior:url(htc文件所在路径地址)}

  当页面中有较多链接时,expression会严重降低性能,不信看这里,不建议使用。

3.js解决,通过遍历链接,设置a[i].onfocus=function(){this.blur()};

2.改变选中文字颜色

::-moz-selection{background:#6374AB;color:#fff;}
::selection {background:#6374AB;color:#fff;}

好像这个比较流行,去不少博客都能见到这种设置。火狐、opera 9.0/safar3.0都支持,不知他们早期版本是否支持。到IE7为止ie都不支持。曾尝试通过js的selection.TextRange();不过没成功,不知那位高人能实现。

其实上面两个问题都是一些细节问题,无关大局,在不在意由你。

相关延伸:

Active vs. Focus Links

outline MDC

CSS中的行为——expression 

 

 

发表于:2008/11/29 11:16 | 32 views | 发表评论

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

回顶部