CSS 兼容手机浏览器 点击蓝色边框

最新推荐文章于 2022-05-27 10:24:49 发布
原创 最新推荐文章于 2022-05-27 10:24:49 发布 · 6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS

本文介绍了一种通过CSS全局设置来避免部分手机浏览器中点击链接时出现的蓝色虚线框的方法。这种方法可以改善用户体验，使页面视觉效果更加统一。 
* {   

    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
}

CSS放入全局，屏蔽部分手机浏览器 点击链接出现蓝色虚线框。
掌握CSS3，优化前端页面的兼容性
小白菜的博客
04-23 1194
在当今数字化时代，前端页面的质量和用户体验至关重要。CSS3作为前端开发的重要技术之一，为页面设计带来了丰富的功能和绚丽的效果。然而，不同浏览器对CSS3的支持程度存在差异，这导致前端页面在不同浏览器和设备上可能出现显示不一致的问题。本文的目的在于帮助开发者全面掌握CSS3的特性和使用方法，深入理解兼容性问题的根源，并提供一系列有效的优化策略和解决方案，以确保前端页面在各种浏览器和设备上都能呈现出一致且良好的效果。
css浏览器兼容整理
03-02
### CSS浏览器兼容性整理 #### 一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSShack兼容一览表 为了确保网站能在不同的浏览器中呈现出一致的效果，了解和掌握各种CSS hack技巧是非常重要的。以下是一些常用且有效的...
移动端点击事件出现蓝色框
weixin_52279913的博客
05-27 730
最近开发h5发现页面在移动端展示的时候，点击会出现蓝色的框 这看起来很不美观 在网上找到了一些解决办法 在此记录 *{ -webkit-tap-highlight-color:rgba(0,0,0,0); } 一句css代码解决，亲测有效
css按钮按下去有框,CSS角落框/按钮
weixin_30311179的博客
08-03 277
csshtml, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, su...
兼容各种主流浏览器的CSS阴影效果
X-rapido的专栏
06-28 649
CSS阴影效果(Box shadows)应用在Web页面设计上已经有了一段时间了。之前在CSS2阶段阴影效果还不是很有效之时，大部分的这种效果都是使用Photoshop图片实现的，但对于一些缺乏这些绘图技巧的人来说，比如我，学习Photoshop是件讨厌的事情。但随着浏览器技术的进步，不会使用Photoshop绘图技术也不能阻挡我们使用阴影效果了。就在不仅之前，我找出一段代码，它能在兼容各种主流浏览
移动端点击出现蓝色框的解决方案
weixin_43170484的博客
09-17 4235
/这一句是用来解决在安卓上的点击出现篮框问题/ body{ -webkit-tap-highlight-color:rgba(0,0,0,0); } /下面是解决ios上去除微信点击蓝色边框 / a:focus, input:focus, p:focus, div:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-us...
css 手机点击蓝色边框,手机网站点击链接时触发颜色区块框解决办法
weixin_36277197的博客
08-04 690
忙起来的时候连博客都忘记登录，就更别说写博客了，所以一不小心差点遗忘了我的泪雪博客，因子凡最近正在给泪雪网的移动端做改版，然后在开发中遇到一些新的问题，那就是手机上浏览网站，点击链接或者页面区域的时候会出现蓝色的区块，或者说出现一层遮罩，让人有些不是很舒服，那么该如何解决呢？首先并不是所有浏览器访问都会出发区域块，子凡所使用的夸克浏览器目前出现了，其它浏览器未做详细测试，从开发者的角度来看触发区域...
如何让css在所有浏览器下兼容
09-01
### 如何让CSS在所有浏览器下兼容 在Web开发领域，确保CSS代码能够在不同浏览器上稳定运行是一项重要的技能。本文将详细介绍如何使CSS在各种浏览器（包括但不限于IE6、IE7、IE8以及现代浏览器如Firefox和Chrome）下...
CSS Hack解决浏览器兼容问题
"这篇文章主要探讨了CSS中针对不同浏览器的兼容性问题，特别是与CSSDIV相关的技巧，如何通过使用特定的CSS Hack来确保在IE6、IE7、Firefox以及Opera等浏览器中的正确显示。" 在网页设计中，CSS（层叠样式表）是用于...
div+CSS兼容技巧：解决浏览器差异与兼容性问题
div+CSS的兼容性涉及到选择器优先级、条件注释、浏览器特定的解析差异以及CSS语法的细微调整。了解并掌握这些技巧，可以帮助开发者创建更兼容、高效的网页布局。在现代开发中，尽管IE6的市场份额已大幅下降，但依然...
CSS--移动端点击取消高亮--点击取消超链接高亮--去掉选中div后出现的蓝色高亮--点击取消ios蓝色框高亮
weixin_45406850的博客
04-21 3691
去掉选中div时的蓝色高亮，点击取消高亮，取消ios蓝色框高亮
css：去掉手机端页面 点击出现的边框 阴影
weixin_34194551的博客
10-19 607
*{ 　　outline:none;（去掉蓝框）　　-webkit-tap-highlight-color:rgba(0,0,0,0) ;（去掉阴影）适用于ios，Android } 转载于:https://www.cnblogs.com/yy1725271/p/5977641.html
常见浏览器兼容问题
YoungRoc--FLY
08-06 1138
浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 碰到频率:100% 解决方案：CSS里    *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
CSS3 修改和去除移动端点击事件出现的背景框
weixin_33733810的博客
07-27 233
2019独角兽企业重金招聘Python工程师标准>>> ...
web app解决手机浏览器点击链接出现蓝色边框
Je_WangZhe的专栏
06-30 3956
最近做web app项目时，经常出现一些链接在点击的时候会出现蓝色的边框，例如图片、链接等等，点击的时候都会有这种蓝色边 框，这次出于PM要求去掉，将蓝色边框改为手指触摸屏幕与手指离开屏幕做一个背景色的切换。 解决以上问题是用到一个比较偏门的CSS3属性: -webkit-tap-highlight-color        这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过
html5+css3适配问题（手机、平板、PC）
热门推荐
HX_lei的博客
03-15 3万+
随着互联网的快速发展，以及html5+css3的迅速崛起。渐渐的响应式布局，也会慢慢的出现在我们的视野里，身为专业的web前端人员，还不学习新技术你就out啦！为什么这样说呢？因为响应式布局能同时兼容多个终端，比如（手机、平板、PC）做一个网站转眼间就可以变成3个网站，和现在相比是不是更加具有优势呢! 可能有些人对“什么是响应式布局”还不是很了解，下面就跟大家简单说下什么是响应式布局： 响应式
移动端1px问题border.css
LLL_liuhui的博客
08-10 720
@charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft {...
h5页面中的电话、地址、日期在ios中字体变为蓝色的并且变为可点击状态解决办法
royal1235的博客
05-22 1064
1.ios系统默认会将h5页面中的电话、地址、日期解析为可点击状态，并且字体变为蓝色，有时候这些可能并不是我们所需要的，如何解决出现的这些问题？ 2.网上搜一下都是这种办法： <meta name = "format-detection" content = "telephone=no"> 手机号这样做确实起作用了，接着我把address，date按照这样规则加上去没效果，而我的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值