CSS教程:text-indent隐藏文字出现虚线框outline


  链接用图片做背景,text-indent:-9999px; 隐藏文字,此效果在 IE 中是正常的,但在 Firefox 里,鼠标点击该链接时,虚线框却会包住被缩进的文字,结果显示为虚线框 N 长。

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

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

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

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 中。



相关阅读:
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
ASP视频教程:建立产品类别表和添加类别页面
表单元素与提示文字无法对齐的解决方法(input,checkbox文字对齐)
原来ASP和PHP都是可以删除自身的
jsp dwr级联效果代码
zeroclipboard复制到剪切板的flash
我的论坛源代码(六)
Oracle数据库文件恢复与备份思路
PHP学习笔记之一
Windows注册表应用小技巧四则
PHP中的Java扩展
如何在网站级别动态更改主题
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
用JavaScript和注册表脚本实现右键收藏Web页选中文本
快速导航

Copyright © 2016 phpStudy |