outline轮廓线在不同CSS样式下的表现

CSS 去除浏览器默认 轮廓外框

在默认情况下,点击 a 标签,input,或者添加click事件的时候,浏览器留下一个轮廓外框(chrome之下为蓝色)~ 然而这些默认的轮廓外框,有时候很影响美观,并不是我们想保留的。 我们应如何消除这些讨厌的 轮廓外框呢?

使用outline:none去除轮廓外框

如:

a{ outline:none; }

PC端轮廓外框消失了,然而发现在手机上依然存在~~

这时候添加如下代码便可

a{
outline:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

-webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。

该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。

语法:

-webkit-tap-highlight-colorcolor

默认值: inherit

适用于:链接元素比如新窗口打开,img元素比如保存图像等等

取值:

color:颜色值
transparent:透明值

* CSS3新增属性可能存在描述错误及变更,仅供参考,持续更新

兼容性:

  • iOS 1.1.1及更高版本的Safari浏览器可用
  • 大部分android手机也是支持的,只是显示效果有所不同。

默认

普通的文字链接这是默认状态下,CSS文字缩进属性text-indent为-1000像素的表现。这是默认状态下,a标签内部span标签绝对定位左偏移-1000像素的表现。

这里使用了文字偏移技术。一是使用text-indent负值;而是添加内部标签,然后左偏移绝对定位,定位至浏览器可视区域的外部。然而此技术会带来的问题是:焦点区域跟着延伸了,于是会有长长的链接轮廓框。在Firefox浏览器下,点击上面两个文字按钮可见此问题。

默认样式加overflow:hidden处理

普通的文字链接这是overflow:hidden状态下,CSS文字缩进属性text-indent为-1000像素的表现。这是a标签overflow:hidden状态下,a标签内部span标签绝对定位左偏移-1000像素的表现。

添加overflow:hidden可以有效解决链接轮廓框被延长的问题。不过,值得一提的是,在Opera浏览器下,第二张图片链接,即使用绝对定位偏移的那个链接的链接轮廓框依旧被拉长了,这可以说是一个bug。

a{overflow:hidden;}

去除链接轮廓框

普通的文字链接这是outline:none状态下,CSS文字缩进属性text-indent为-1000像素的表现。这是a标签outline:none状态下,a标签内部span标签绝对定位左偏移-1000像素的表现。

添加outline:none可以有效的去除链接轮廓框,这适用于所有的用户(习惯鼠标的以及习惯键盘的)。此样式经常可以在CSS重置(css reset)中看到。

a{outline:none;}

去除链接轮廓框再通过:focus引入

普通的文字链接这是a:focus{outline:thin dotted;}状态下,CSS文字缩进属性text-indent为-1000像素的表现。这是a:focus{outline:thin dotted;}状态下,a标签内部span标签绝对定位左偏移-1000像素的表现。

通过:focus重新引入outline会使IE和Firefox浏览器下:active的样式重新出现。于是,在单击文字或图片链接的时候,会看到链接轮廓框。在chrome浏览器以及Safari浏览器下,:focus{{outline:thin dotted;}可以准确的替换其默认focus时的样式。但是Opera浏览器不是覆盖原来的focus样式,而是添加,于是会出现双边框。

a{outline:none;} a:focus{outline:thin dotted;}

去除链接轮廓框,通过:focus引入,再由:active消除

普通的文字链接这是a:focus{outline:thin dotted;}a:active{outline:none;}状态下,CSS文字缩进属性text-indent为-1000像素的表现。这是a:focus{outline:thin dotted;}a:active{outline:none;}状态下,a标签内部span标签绝对定位左偏移-1000像素的表现。

此方法在所有浏览器下都表现良好,点击无链接外框,且不影响focus的外框表现。就是有些啰嗦冗余。还有就是替换了chrome及Safari浏览器的默认focus样式,同样的Opera浏览器下的双边框。

a{outline:none;} a:focus{outline:thin dotted;} a:active{outline:none;}

仅仅使用:active去掉链接外框轮廓线

普通的文字链接这是a:active{outline:none;}状态下,CSS文字缩进属性text-indent为-1000像素的表现。这是a:active{outline:none;}状态下,a标签内部span标签绝对定位左偏移-1000像素的表现。

这是个简洁高效的方法,可以去除用户点击图片式链接时的外框线的问题,同时保留了习惯使用键盘用户在链接获得焦点时虚框可见。并且不会重置浏览器默认的focus获得焦点的样式,或是产生双边框的问题。可以说是相当完美。

a:active{outline:none;}

使用:hover和:active去掉链接外框轮廓线

普通的文字链接这是a:hover,a:active{outline:none;}状态下,CSS文字缩进属性text-indent为-1000像素的表现。这是a:hover,a:active{outline:none;}状态下,a标签内部span标签绝对定位左偏移-1000像素的表现。

一些测试表明,仅仅使用:active还有一点小小的问题,就是用户点击一个链接和这个链接指向的页面加载的过程中,链接外框依旧会出现,这其实也不难理解,链接被点中,也处于:focus状态。由于本测试页面的链接基本上都是在页面自身,所以看不到此问题。一定程度上解决此问题的方法就是添加:hover的outline:none属性。

另外,还有一种情况下,链接外框的问题没有解决,就是当用户点击了一个链接后,再点击浏览器的后退按钮的时候,此时outline就会出现。

a:hover,a:active{outline:none;}

不推荐的IE6-7浏览器去除虚框方法

普通的文字链接这是hidefocus="true"状态下,CSS文字缩进属性text-indent为-1000像素的表现。这是hidefocus="true"状态下,a标签内部span标签绝对定位左偏移-1000像素的表现。

IE浏览器下有个hidefocus="true"的属性,可以去除点击时的IE6和IE7浏览器下虚框,但是也抹杀了键盘用户的focus焦点虚框,个人而言,此方法不推荐。我倒是建议置之一边,不闻不问。

<a href="#" hidefocus="true">链接</a>

outline轮廓线在不同CSS样式下的表现的更多相关文章

  1. CSS样式下划线

    样式之文字下划线 第一 text-decoration: underline; 缺点是不好修改颜色 不要修改下划线的位置,优点就是一行代码解决 可以使用line-height: 20px; 也能调整位 ...

  2. CSS样式下border的几种线型

    在用border的时候经常会忘记它有多少种线型以及各种线型的写法:每次都得从头开始,或是用到Google.百度之类的,有空整理了一下 (1)none (没有边框,无论边框宽度设为多大) (2)dott ...

  3. 脚本工具(获取某个文件夹下的所有图片属性批量生成css样式)

    问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...

  4. vue环境下安装npm,启动npm 修改js,css样式

    vue环境下修改js,css样式 1.在所在的项目项目的resource 文件夹下面,shift + 鼠标右键--在此处打开命令行窗口: 2.在打开的窗口执行: 安装npm:npm install 启 ...

  5. 下拉框等需要显示上下箭头切换的CSS样式

    下拉框等需要显示上下箭头切换的CSS样式   .icon-right, .icon-down, .icon-up { display: inline-block; padding-right: 13r ...

  6. css样式重叠、css样式继承、css 属性计算,,a元素下的文字颜色不能继承

    1.属性的重叠 在渲染前浏览器将判断使用哪个样式 我们书写的样式会覆盖浏览器的自带样式 我们写的样式进行权重比较,规则如下 !import Infiniti无穷大 进制伪256行内样式 1000.id ...

  7. 使用chrome查看页面元素的css样式

    使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. ...

  8. 分享一下自己在用的CSS样式重置代码

    通过借鉴网上大牛们的经验和自己在工作中碰到的一些问题,总结出了这些比较常用的CSS样式重置的代码: @charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响,添 ...

  9. CSS样式表初始化代码

    CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影 ...

随机推荐

  1. POJ 3126 Prime Path【从一个素数变为另一个素数的最少步数/BFS】

    Prime Path Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 26475 Accepted: 14555 Descript ...

  2. 洛谷 P1583 魔法照片【二级结构体排序】

    题目描述 一共有n(n≤20000)个人(以1--n编号)向佳佳要照片,而佳佳只能把照片给其中的k个人.佳佳按照与他们的关系好坏的程度给每个人赋予了一个初始权值W[i].然后将初始权值从大到小进行排序 ...

  3. HDU 1856 More is better (并查集)

    题意: 给你两个数代表这两个人是朋友,朋友的朋友还是朋友~~,问这些人组成的集合里面人最多的是多少... 思路: 属于并查集了,我用的是带路径压缩的,一个集合里面所有元素(除了根节点)的父节点都是根节 ...

  4. 大数据技术之_16_Scala学习_07_数据结构(上)-集合

    第十章 数据结构(上)-集合10.1 数据结构特点10.1.1 Scala 集合基本介绍10.1.2 可变集合和不可变集合举例10.2 Scala 不可变集合继承层次一览图10.2.1 图10.2.2 ...

  5. 集训考试题tents

    题目描述Pb 去郊游啦!他来到一块空地打算在这里搭一个帐篷.但是,帐篷的四个支撑点不能在落在任何位置上,而只能落在一些固定点上.现在,他找到地面上有 N 个点可以支撑帐篷.(四个支撑点必须围成一个矩形 ...

  6. VisualVM远程JVM

    Tomcat配置 进入TOMCAT_HOME/bin目录 打开catalina.sh文件,加入如下信息: JAVA_OPTS="$JAVA_OPTS -Djava.rmi.server.ho ...

  7. inline select

  8. 前端设计师必须知道的10个重要的CSS技巧

    对于一个初入门的前端设计师,在设计修改网站前端的时候,我们需要编写一些CSS.JS的内容达到界面效果.今天分享10个对于前端设计师来说重要的CSS技巧,这也是我在给许多客户做网站的过程当中总结出来的. ...

  9. Find the Difference -- LeetCode

    Given two strings s and t which consist of only lowercase letters. String t is generated by random s ...

  10. [Atcoder Grand Contest 002] Tutorial

    Link: AGC002 传送门 A: …… #include <bits/stdc++.h> using namespace std; int a,b; int main() { sca ...