移动浏览器的CSS兼容性 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

4种方案解决CSS浏览器兼容性问题

前言前端是一个苦逼的职业，不仅因为技术更新快，而且要会的东西实在太多了，更让人头疼的是，还要面临各种适配、兼容性问题。 ? 为什么会有浏览器兼容性问题？还不是因为浏览器厂商太多了！...CSS浏览器兼容性问题的解决思路和方案今天，不想去关注太多细节问题，比如那个css样式需要我们去兼容，而是想讨论一下大的解决思路，主要包括4个方面，浏览器CSS样式初始化、浏览器私有属性，CSS hack...样式初始化，相信能解决不少常规的兼容性问题，接下来再看看浏览器的私有属性。...，并不能给我们技术上带来什么大的提升，无非是给各个浏览器厂商填坑罢了，随着时间的流逝，这些技术的价值也会越来越小，怎么花最小的力气解决css兼容性问题，让我们把更多的时间留给美好的生活，才是关键，好在有一些自动化插件可以帮我们从繁重的兼容性处理中解脱处理...，如果还没有使用，那就赶紧应用到我们的项目中吧，别再让CSS兼容性浪费你的时间！

3.5K1 0

CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器

最近越来越喜欢用css写渐变背景效果，在做pc页面时，遇到了不兼容IE浏览器，以下算读书笔记。...效果都是同样的效果，就是利用background作一个垂直渐变，起始颜色#b8c4cb，结束颜色#f6f6f8。 IE浏览器下渐变背景的使用需要使用IE的渐变滤镜如下代码： FILTER:?...startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=”色彩” 代表渐变结尾的色彩。background:?-ms-linear-gradient(top,?...Firefox浏览器下的渐变背景 background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8); chrome/Safari浏览器下的渐变背景实现 background...Opera浏览器下的渐变背景实现 background:?-o-linear-gradient(top,?#fff,?#0000ff);??

1.3K12 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS Hack解决浏览器IE部分属性兼容性问题

阅读目录一、Css Hack 不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果...二、Css Hack分类 2.1.属性前缀法(即类内部Hack)：如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"...--[if IE]>IE浏览器显示的内容，针对IE6及以下版本：只在IE6-显示的内容。...这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效 2.1.属性前缀法(即类内部Hack)::: ? 2.2.选择器前缀法(即选择器Hack) ?

1.6K2 0

css 兼容性前缀

一、不同浏览器内核下的书写规则 ?...二：transform 具体变性中心基点 transform-origin 默认情况下 rotate旋转、scale缩放、translate位移、矩阵matrix默认物件的水平垂直正中心点

1.6K4 0

浏览器兼容性自查

Author: Codec.Wang Date: 2020/08/29 在解决浏览器兼容性问题或使用一些较新的 Web 技术时，经常需要查看各浏览器对 HTML/CSS/JS/SVG/Web/HTTP...等某些接口的支持程度。...以下是两种不错的自查方式： CanIUse https://caniuse.com/ 搜索关键字就会给出该特性在桌面和移动端主流浏览器中的兼容数据：该特性在全球浏览器中支持 + 部分支持的比例，可以点击搜索栏旁边的设置来显示中国的数据...浏览器的当前版本，往上是旧版本，往下是未来的版本详情浮窗：该版本的发布时间和使用率等，浏览器使用率数据来自 StatCounter 附加资源：很多实用的链接，比如该特性的规范定义、功能演示、不支持该特性时可使用的...Polyfill等等 MDN 在 MDN(Mozilla Developer Network) 上查看接口的相关资料时，一般都会在最后给出浏览器的兼容数据，如： https://developer.mozilla.org

2.4K3 0

浏览器兼容性问题

1.浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。...碰到频率:100% 解决方案：CSS里 *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是...2.浏览器兼容问题五：图片默认有间距问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。...（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用） 3. ie6.0横向margin加倍产生因素：块属性、float、有横向margin...important 注明的css属性具有最高优先级(.abc{color:red !important;})。但在ie6中!important具有一个bug:在同一组css属性中，!

1.9K3 0

浏览器兼容性问题

360浏览器兼容性问题-backspace删除键出现后退页面，无法删除内容直接将下面这段代码放在网站的母版页，或者公用的地方。保证执行下面这段脚本即可。... function banBackSpace(e) { var ev = e || window.event; //各种浏览器下获取事件对象...ev.preventDefault(); } if (ev.returnValue) { //IE浏览器下用...window.event.returnValue = false;实现阻止元素发生默认的行为 ev.returnValue = false; }...document.onkeypress = banBackSpace; //对功能按键的获取 document.onkeydown

1.3K2 0

【CSS】处理兼容性问题 | CSS Hack | IE

CSS Hack CSS hack 主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。...IE条件注释法，即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。你想要执行的代码 CSS属性前缀法，即是给css的属性添加前缀。...解决办法：就是不要同时采用top和bottom ,统一一些~ （4）有些浏览器解析img标签也有不同，img是行内的，一般都会紧接着排放，但是在有些情况下还是会突然出现个间距解决办法是：给它来个浮动...其实主要是其CSS属性的排序问题。一般来说，最好按照这个顺序：L-V-H-A （7）chrome下默认会将小于12px的文本强制按照12px来解析。

1.2K2 0

前端开发：不处理浏览器兼容性，才是最佳的浏览器兼容性处理方式

这些与业务逻辑无关的「脏活累活」，像一块块甩不掉的石头，压得开发者喘不过气。但有没有一种方式，能让普通开发者彻底摆脱兼容性的困扰？答案是：将浏览器兼容性处理从业务层剥离，交给架构层集中解决。...传统做法是手动准备多套图片，通过picture标签或CSS HACK适配，但这会增加业务开发的工作量。这种机械工作完全可以交给构建过程。...，通过 Mixin 复用兼容代码片段PostCSS 后处理：作为样式界的 Babel，自动处理浏览器前缀、单位转换等兼容问题这种分层体系让样式兼容性问题在架构层集中解决，业务层只需关注样式逻辑而非兼容细节...架构层可以通过「分条件加载」优化体验：根据浏览器对新特性的支持情况，动态加载不同版本的代码。...毕竟，最好的兼容性处理方式，是让开发者忘记「兼容性」的存在。

2460 0

IE11的CSS兼容性问题

最近测试给了我一大堆BUG，一瞅发现全是IE11的。吐槽一下这个浏览器真的比较特立独行。很多默认的样式跟别的浏览器不同，而且最明显的一点应该是padding左右内边距往往比别的浏览器大了一倍。...于是在网上搜了一下有没有专门针对IE11的CSShack，就是只对IE11生效的CSS样式，一查还真有。...就是在CSS样式文件中加一个@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){里面是你的样式}。　　...，当浏览器为IE11时，@media中的样式会被执行一遍。　　...这个时候你只要针对专门的input标签，增加一个input{outline:none};就可以将红色的边框去掉了。　　今天大拿直接一行代码把我之前的IE11兼容性问题全解决了。不服不行。

2.9K4 0

【css动画】移动的小车

看这个就够了详解 CSS3中最好用的布局方式——flex弹性布局（看完就会） [前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（...看完就会） CSS3 transform 2D转换之移动旋转缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂）目录效果演示代码 ----...，给每个li设置合适的大小，弄作虚线，然后禁止换行，并且多余的li裁剪，然后形成了一条马路。...然后书写动画，车的移动直接移动外边的大box盒子就好，车轱辘设置旋转动画，需要注意车来回跑动所以轱辘转动方向需要变化，我们把时长设置成一样就好，后面用alternate属性反向结束就可以，然后用bootstrap...设置了两个按钮，分别给按钮添加上相对应的js，用来控制动画属性的有无。

2K2 0

ie浏览器的部分兼容性问题

...config.params } } return config }, error => { return Promise.reject(error) }) 360浏览器切换急速模式和兼容模式会导致...localStorage消失解决方案：改为设置cookie IE浏览器下把网站加入兼容性视图之后，网站打不开解决方案：添加meta头部标签 <meta http-equiv="X-UA-Compatible

1.2K3 0

减少浏览器兼容性问题

做为一个前端工程师，不少时间都在处理浏览器兼容性问题。本文对如何减少浏览器兼容性问题的方法做了些总结。确定运行环境在开发前，我们要确定页面的运行环境：要兼容哪些浏览器，以及哪些屏幕分辨率。...如果我们不了解我们的运行环境，兼容性也无从谈起。也只有在确定来运行环境后，我们才可以选择合适的方式。我们可以借助 HTML5 与 CSS3 技术应用评估来选择用哪些技术。...下面是一些查询兼容性的网站 es5规范浏览器兼容性表格 es6规范浏览器兼容性表格 html5 移动端兼容性速查如果实在想用某个特性，但某个想兼容的浏览器不支持，可以找找有没库来做支持的 HTML5...所以我们要了解哪些写法会产生兼容性问题，然后避免那样写。推荐认真研究浏览器兼容性-根本原因内容列表。充分的测试推荐使用 iTest。它是阿里出的测试工具。支持主流浏览器的截图，死链接检测等。...一些 CSS 属性记得要加浏览器前缀有时页面的元素改变后，应该被重绘，但浏览器没有重绘，可以用让元素隐藏，然后再显示的方式来让浏览器重绘拓展阅读 W3Help - 兼容性 - 根本原因内容列表前端工程师如何系统地整理和累积兼容性相关的知识

1.3K2 0

怎样解决浏览器兼容性的问题

1.问题描述：chrome浏览器下正常显示，但是到了ie浏览器就是出现了一些问题，下边距和右边距留出来了空隙。其原因是页面在不同浏览器下不兼容。...2.解决方案：方法一：直接加载脚本的方法，在 html 文件 !DOCTYPE 下面那行加上 <!...：方法二：在本地调试html页，如果其中包含js或flash，IE经常会提示“IE已限制此网页运行可以访问计算机的脚本或ActiveX控件”。...方法是：工具 – Internet选项 – 高级标签 – 在安全分类下面，有一项“允许活动内容在我的计算机上的文件中运行*”。我们要找的就是他！...打上对勾后重启IE就行了（如果还开着其它程序，只关IE浏览器窗口是没有效果的，还需要重启电脑）。此方法适用于所有阻止本地脚本运行的IE版本。

5911 0

CSS常见兼容性问题总结

浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。这里谈到的浏览器，主要指IE6/IE7/IE......但更多的兼容还是考虑IE6/IE7/FF之间的斗争先来谈谈CSS Hack 　　我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写...CSS的过程叫做 CSS hack. 　　...（1）IE条件注释法，即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。

1.8K3 0

毛玻璃 CSS 特效的兼容性方案探究

：然后再到某台老 Android 版本的移动端上看看，结果不行了！！！...，backdrop-filter 会在不支持的浏览器上直接显示背景色，也就是失去设定的效果（“体验降级”）。...另一个设置模糊度的 CSS 属性就是 filter，那么我们的另一个思路就是通过 filter 来模拟 backdrop-filter 属性的效果。...，通过 fixed 方式固定背景图，这样当元素在任意方向滚动的时候，背景图不会移动，能保证背景效果是一致的移动时候的效果 3.2 利用 margin 属性的负值扩大容器模糊度的效果如下图，还是有差异...如果“毛玻璃”和背景没有文中的相对移动，直接让 UI 小姐姐切个图，直接解决一切兼容性 & 性能问题！

2.8K1 0

CSS兼容性的一些Hack方法

CSS hack方式一：条件注释法这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。举例如下只在IE下生效这段文字只在IE浏览器显示 CSS hack方式二：类内属性前缀法属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。...CSS hack方式三：选择器前缀法选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。...比如由于IE8及以下版本不支持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染，这种情况下如果不使用css3pie或htc或条件注释等方法时,可能就得让...相信只要大家一起努力，少用、慎用hack，未来一定会促使浏览器厂商的标准越来越趋于统一，顺利过渡到标准浏览器的主流时代。抛弃那些陈旧的IE hack，必将减轻我们编码的复杂度，少做无用功。

2.4K3 0

经常遇到的浏览器的兼容性有哪些?

png24 位的图片在 iE6 浏览器上出现背景解决方案是做成 PNG8. 浏览器默认的 margin 和 padding 不同。...IE6 双边距 bug:块属性标签 float 后,又有横行的 margin 情况下,在 ie6 显示 margin比设置的大。...缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示。...可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。...超链接访问过后 hover 样式就不出现了被点击访问过的超链接样式不在具有 hover和 active 了解决方法是改变 CSS 属性的排列顺序: L-V-H-A : a:link {} a:

8415 0

前端浏览器兼容性：解决跨浏览器挑战的终极指南

前端开发中，浏览器兼容性是一个永恒的挑战。不同的浏览器、版本和设备可能导致网站或应用在某些情况下出现问题。...本文将深入讨论前端浏览器兼容性的关键概念，为您提供一份全面的指南，并提供带有实际代码示例的技巧，以解决跨浏览器的挑战。第一部分：浏览器兼容性基础 1.1 为什么浏览器兼容性重要？...解释浏览器兼容性对用户体验和业务的重要性，以及不解决兼容性问题可能带来的后果。... 2.2 CSS样式和布局探讨CSS样式和布局在不同浏览器中的差异，以及如何使用前缀、Polyfill和媒体查询进行处理。...希望这篇文章对您有所帮助，让您成为前端浏览器兼容性的专家。

2.5K4 0

移动浏览器点击事件的问题

大家都知道移动端的程序中，是没有点击事件的，只有 touchstart、touchmove、touchend。...利用jquery这样写的话，也可以，但是当你点击按钮的单击事件时，将会等待大约300ms的时间。这是因为，浏览器是等着看，如果你是真正执行双击。...如下代码所示,就会延时300ms： $("#sid").click(function(){ console.log(111); }); ps:在移动浏览器端，你会发现，当你点击某个区域的点击事件时...e.stopPropagation(); console.log(111); } }); ps：此时你在看看是否有所变化插入点小知识： Single tap跟press的区别...triple就是三下哈哈哈~~~ 解决方案：（2）使用FastClick插件地址：http://www.uedsc.com/fastclick.html 解决方案：（3）点击和滑动之间有一个本质的区别就是

1.3K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭