当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 去除链接元素的虚线框 兼容IE7、IE6、FF

CSS样式表
CSS 表单元素不继承body的字体属性
网页制作学习教程 CSS Position
网页设计学习教程 CSS盒模型
vertical-align 表单元素垂直对齐的解决方法
不用Cookie的仿刷新二级高亮菜单
CSS3 优势以及网页设计师如何使用CSS3技术
CSS 网页制作 提高CSS可阅读性
CSS 样式表中引用图片地址在各浏览器中的差异
CSS Sprite优化 减少HTTP链接数
网页制作中应用的50个CSS技巧(国外)
CSS 英文教程 CSS语法
CSS 网页文字渐变效果
纯css 圆角实现代码
CSS 新的图像替换方法
不必需的样式脚本文件导致页面不能及时更新
CSS 约定写法 利用扩展
最全的CSS浏览器兼容问题小结
CSS 网页图文混排的10个技巧
IE的CSS制作网页技巧3则
创造100% 自适应css布局的行之有效的方法

No. « 78 79 80 81 »

技术文章搜索

关键字

CSS样式表 中的 去除链接元素的虚线框 兼容IE7、IE6、FF

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 128 ::
收藏到网摘: n/a

Web的发展非常迅速，UI设计也越来越美观，漂亮。同时也给WEB前端编码提出了新的要求。链接元素在点击时会出现虚线框，由于种种原因，您的主管可能要求你想办法将链接虚线边框出除。 推荐下面的代码
复制代码 代码如下:

a {outline: none; /* for Forefox */ }
a {star:expression(this.onFocus=this.blur()); /* for Ie*/ }

下面的代码比较麻烦
我们采用htc文件的办法来解决这个问题。首页将以下代码保存为link.htc文件。
复制代码 代码如下:

<public:attach event="onfocus" onevent="hscfsy()"/>
<script language="javascript">
function hscfsy(){
this.blur();
}
</script>

　　在HTML文件中写入以下代码，建立一个链接：
<a href="#" title="软晨学习网">ruanchen.com</a>
　　我们开始为此链接定义CSS样式：
a {
　　display:block;
　　width:100px;
　　height:30px;
　　line-height:30px;
　　text-align:center;
}
a:hover {
　　background:#ddd;
}
　　CSS样式确定了链接的外观，具有一定宽度与高度的块元素。文字水平左右均居中对齐。
　　我们在a标签的样式内，加入一条属性。用此消除链接的虚线边框：
a {
　　display:block;
　　width:100px;
　　height:30px;
　　line-height:30px;
　　text-align:center;
　　behavior:url(line.htc);
}
　　我们运行以下代码查看效果：
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

我们在IE7、IE6中预览，已经没有问题了。但是在FF中虚线框依然存在。
　　我们新增一条样式定义来解决此问题。
复制代码 代码如下:

a:focus { outline:0; }

查看最终的运行效果：
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

在IE7、IE6、FF中均成功实现了消除链接的虚线框。