中资源
中国品牌形像设计网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
深圳网站建设 广州网站设计 域名注册 上海网站建设 虚拟主机 广州网站建设 广州网页设计 签名设计 虚拟主机 域名注册 品牌形象设计 设计联盟
求创科技
上海网麒科技
中国福网
中国设计秀
亿恩科技
中国设计秀
中国设计秀
当前位置:网络学院首页 >> 设计教程 >> web标准 >> 设计中碰到隐藏文字 出现虚线框outline

设计中碰到隐藏文字 出现虚线框outline

来源:中国设计秀    作者:cooty    点击:138     加入收藏
关键字:文字 虚线 WEB标准 css
中资源
  链接用图片做背景,text-indent:-9999px; 隐藏文字,此效果在 IE 中是正常的,但在 Firefox 里,鼠标点击该链接时,虚线框却会包住被缩进的文字,结果显示为虚线框 N 长。

  因为平时是用overflow:hidden; 属性的,所以一直也没有注意到这个问题的存在,但当你需要使用 JS 来实现某种交互时,强烈建议不要使用 overflow:hidden; 属性,因为会给你带来很多意想不到的麻烦。

  虚线框,其实就是 CSS 中的 outline 属性,这也说明 IE 和 Firefox 对于 outline 和 border 的解析范围并不一致:IE 认为虚线框就是border的边缘,而 Firefox 则认为虚线框应该是文字范围。

  那 W3C 中是如何定义 outline 的呢?

div css xhtml xml Example Source Code Example Source Code :[At times, style sheet authors may want to create outlines around visual objects such as buttons, active form fields, image maps, etc., to make them stand out. CSS2 outlines differ from borders in the following ways:
1. Outlines do not take up space.
2. Outlines may be non-rectangular.
 

  把虚线框去掉了a:focus { outline:0 } ,毕竟这个问题只存在 Firefox 中。
0
顶一下
2008-01-25 13:33:27    出处:中国设计秀cnwebshow.com
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口