css3兼容性问题归纳

Android2.3的overflow问题

在android2.3及以下系统版本的浏览器不支持overflow：scroll / auto，即在页面元素里面的内容如果超过了父元素或祖先元素的高度是无法滚动的，可以通过css3的transform来实现滚动，代表作：iscroll。

Android2.3的聚焦问题

Android2.3会出现点击聚焦的情况，出现黄色的边框，通过对相应的元素设置css –webkit-tap-highlight-color: rgba(0,0,0,0)解决，另外一些高版本的系统也可能会出现有黄色边框的情况，这时候试着用outline：none来解决。

Android2.3 position:fixed及input中文输入bug

在android2.3系统中，如果页面中有position为fixed的元素，input外层的元素定位为relative或者自身的定位为relative，就会产生一种奇怪的现象，在input中输入数字或者字母都很正常，当切换输入法为中文后，发现无法输入，当把position设置为absolute后一切正常，所有当遇到这种情况时就只能改变布局了。

Android2.3 border-radius问题

不支持百分比，可用一个比较大的值 如： 9999px。

Android2.3 动画问题

@-webkit-keyframes wave1{0%{ opacity:0;}8.33%{ opacity:1;}99%{opacity:1;}100%{}}

100%要留一帧空出来。在100%之前写一个最后值 99%那里写。2.3系统的动画才会动。

Android2.3渐变问题

渐变这样写2.3才兼容：

background:-webkit-gradient(linear,00,0100%, color-stop(1%,rgba(111,191,7,0)), color-stop(74%,rgba(111,191,7,0)), color-stop(75%,rgba(111,191,7,0.9)), color-stop(100%,rgba(111,191,7,0.9)));

Linear是指渐变方式，0 0指从哪个方向开始。0 0 到 0 100% 说明是从上到下渐变。 后面的color-stop 可以指定百分比和颜色值。

Android4.0及低版本系统touch事件bug

在android4.0系统中，存在部分子版本的系统有touch事件的bug，表现为touchstart是正常的，touchmove只有在touchstart触发的时候触发一次，touchend不会被触发，android2.3会触发startmove一次，当touch结束后会执行剩余的move和end。在zepto库中此问题也没有得到解决,在android4.2系统中也存在这样的问题，后来发现是浏览器将事件cancel调了，目的应该是防止在滚动页面的时候调用，所以在touchmove事件中添加e.preventDefault()，发现touchend被触发了，所以解决方案根据实际使用场景来进行处理。

Android4.X placeholder问题

placeholder 文字字体会偏上。 但是placeholder只能设置他的color。如：

input::-webkit-input-placeholder{
color:red;}

行高不能设置。这时候把line-height设成normal 就能上下居中了。

各个系统对position:fixed的支持情况

手机Safari – iOS5及以后版本都支持. iOS4及以下版本不支持，会当做static处理.

Android

  • Android 2.1 及以下版本不支持.
  • Android 2.2 滚动过程中不保持fixed的位置，滚动完成后回到fixed的位置.
  • Android 2.3 支持fixed, 但是要求页面禁止缩放.
  • Android 3和4支持fixed.

Touchstart, click, tap事件分析

在移动端我们会经常用到touch事件，touchstart事件很灵敏，所有如果要绑定类似于pc端的click事件，用touchstart会经常的误操作，例如滚动页面的时候被误点，所有市面上有很多手势库，封装出了tap等方面，而在移动端click事件也是可以触发的，click事件会在点击300ms左右出发（原因是浏览器希望判断是否是双击），原始的解释参见google这篇[Creating Fast Buttons for Mobile Web Applications](Creating Fast Buttons for Mobile Web Applications)，个人经过实验，页面元素的点击可以考虑用click，和tap效果无明显差别，所以在没有手势库的情况下可以考虑用click来处理用户的点击行为。

禁用webkit浏览器默认样式

webkit上的input,button,及select的默认样式可以通过 –webkit-appearance:none禁用，然后自定义。

Placeholder自适应bug

一个placeholder自适应bug，页面中使用<input>标签并且有属性placeholder，在页面横屏再转回竖屏时，会导致页面无法自适应，无论是android还是ios都会中招。

解决方法是，在<input>外层容器中加overflow:hidden

无刷新改变当前页面url的问题整理

Android 2.3系统存在的问题：

  1. 无刷新改变当前页面url。不支持onpopstate方法，可用onhashchange方法代替。
  2. 虽然支持history的pushState方法和window.onpopstate方法。但是按回退键，即发生history.back()的时候，不会触发window.onpopstate方法。只会触发hashchange事件。

浏览器对popstate事件的整体支持情况：

  1. history的pushState可操作浏览器历史，并且改变当前页面的URL。添加对应的url到历史记录里。但是用pushState方法会产生历史记录，可用replaceState方法代替，不会产生额外的历史记录。
  2. hashchange 和popstate事件 触发的时候，hash已经改变了，无法阻止默认行为。即e.preventDefault()不起作用。
  3. pushState()方法永远不会触发hashchange事件
  4. popstate方法的触发条件：

* 页面前进、后退时触发。
* Hashchange时触发
5. 如何跳转
* 如果history堆栈里有pushState过，那么就回跳到pushState所定的hash页面。如window.history.pushState(‘object’, document.title, “#explorer”);的#explorer页面
* 没有pushState过，就按照history的记录进行回退和前进。

Iscroll插件问题

Iscroll插件被很多webapp应用中来实现列表滚动，设置translate属性可以使滚动更加顺滑，但是在iscroll4.0中开启了translate属性后会导致滚动无法手动停止，在问答社区中有人说iscroll5会解决这个问题，等iscroll5正式发布后可以尝试一下。Iscroll在ios上表现很出色，但是在一些android手机，尤其是低端机，性能不是很好，所以使用也要慎重。

资源分享（来自网络）

推荐一个PPT可以让你全面了解HTML5：http://slides.html5rocks.com/

HTML部分包括大家已经熟知的HTML4.01 Standard http://www.w3.org/TR/html401/还有就是即将成为Standard的 HTML 5 Candidate Recommendation http://www.w3.org/TR/html5/

HTML5 是在 HTML4的基础上增加了更多的语义化标签，比如：

<header>
<nav>
<section>
// 这有太多了，就不一一细说

并且在原有Tag上，扩展了更多的标记属性，比如：

<input type="text" required />
<input type="email" value="[email protected]" />

HTML5除此之外，还引入了很多新的标签和属性，比如：WebApp开发方向的progress、无障碍浏览ARIA 、做SEO优化Microdata等等。

W3C HTML标准列表

CSS部分也是同样的，大家已经熟知的CSS2 Standard

W3C最新的是CSS Level3 标准，由于CSS3包含的内容非常多，文档都是分开的，暂时没办法给出所有的标准地址，先贴一部分常用的标准吧：

W3C CSS标准列表

CSS Selector CSS选取器

Transition 动画过渡效果

Animation 页面动画

JS部分对于HTML5来说主要体现在 Web API 方面，所有 API 都是 BOM对象，下面我也列出一些常见的标准地址：

W3C JavaScript API标准列表

Touch Events 触摸手势事件

Geolocation 地理位置

Web Storage Web存储

通过上面的内容，大概已经了解HTML5是个什么东西了，下面就来说说HTML5开发APP可以使用的一些资源。其实HTML5开发与以往的Web并没有本质的区别，主要差别体现在HTML5的一些新特性并没有被老旧类库很好的支持，这样就需要一些更现代的类库来使用HTML5做开发。

JS库/框架

轻量级库包括

Zepto.js 这个一个在移动端很好用的轻量级库，非常小巧，但是功能也很简单；

jQuery 2.0这里说的是2.0以后的版本，仅支持一些高级浏览器，使用很多HTML5的特性，虽然在移动端开发体积相对zepto较大了些，但是作为一个基础库来说确实令人爱不释手；

App框架（下面的框架不仅仅只能用来移动端开发）

jQuery Mobile和jQuery是一样的编程思想，使用起来非常方便，包含浏览历史管理、视图导航渲染、UI组件等功能；

App Framework与jQuery Mobile非常相似的一个框架，实际我也没有使用过，看过了API，基本与jQuery Mobile类似；

Sencha TouchSencha的产品，是完全web组件化的思路，用来做企业应用开发非常的棒，但是，也有很多缺点，比如体积、复杂、性能等等；

MVC框架

BackboneMVC框架推荐Backbone，并不是因为Backbone有多好，但对于移动端开发来说，Backbone的体积是相对小巧的，并且功能也十分简单，很容易上手，AngularJS体积较大，相对要复杂一些；

UI框架

Bootsrap 3，用来构建HTML/CSS的；

Pure CSS与Bootstrap一样的东东；

工具库（说到工具，实在是太多了，我没办法一一列出来，视乎到这的时候才离题主的问题近了一些）

iScroll模拟区域滚动，在移动端开发中使用

pointer.js触摸手势工具，用来兼容Pointer Event Model与Touch Event Model；

Deeptissue.js触摸手势工具，扩展各种手势事件

QUO.js同上

hammer.js也是手势工具，但这是一个jQuery plugin；

spin.js加载中动画小工具

css3patterns使用css3绘制背景

svgpatterns使用svg绘制背景

textillate.js各种文字动画效果

Effeckt.css各种CSS3的动画效果

JPlayer音视频播放工具

时间： 2024-08-28 09:34:20

css3兼容性问题归纳的相关文章

2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼【转】

摘要: 这篇文章给大家带来<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>,让我们一起来看看2013年的浏览器现状.浏览器厂商之间的竞争促使各大浏览器对 HTML5 和 CSS3 的支持越来越完善 ... ... ... 转眼又已过去了一年,在这一年里,Firefox 和 Chrome 在拼升级,版本号不断飙升:IE10 随着 Windows 8 在去年10月底正式发布,在 JavaScript 性能和对 HTML5 和 CSS3 的支持方面让人眼前一亮.这篇文章给大家带来<五

富文本兼容性问题归纳(win)

上周抽空把去年写的富文本重写了一下,封装成基本UI组件,就可以在聊天框之外的地方复用了.个人觉得富文本是个兼容问题最多的模块之一,尤其是文档也没几个,把mozilla的api文档和IE的dom api关于selection和range的看了一个遍,一个个试,总算找到勉强能用的方法. 其实之前的富文本代码太乱,而且还有不少bug,只是产品经理不给时间改,O__O”… 这个富文本没有用iframe来做输入框,原因有二: iframe是所有dom节点中消耗性能最大的,开多几个ie6/7就会卡到不行了;

css3 兼容性

为了准确快速的知道css3对浏览器的兼容性(这里主要针对ie), 做了一个简单的表格 原文地址:https://www.cnblogs.com/xiaoxinzi/p/8566845.html

前端小知识~~关于css3新增知识~~归纳总结

1.新增选择器 E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:only-child E:only-of-type E:empty E:checked E:enabled E:disabled E::selection E:not(s) 2.Font-face 特性 Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没

scss封装css3兼容性

@mixin transform ($x) { transform: $x; -ms-transform: $x; -moz-transform: $x; -webkit-transform: $x; -o-transform: $x;} @include transform(translate(-50%,-50%))

CSS3动画【归纳总结】

<div class="canvas">              <div class="inner">                <div class="front">                  <p>游戏统计分析</p>                  <div><img src="/images/bgs/home/game.png&quo

前端CSS3笔记

第1章CSS3简介 如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. 1.1   CSS3的现状 1.浏览器支持程度差,需要添加私有前缀 2.移动端支持优于PC端 3.不断改进中 4.应用相对广泛 1.2   如何对待 1.坚持渐进增强原则 2.考虑用户群体 3.遵照产品的方案 4.听Boss的 第2章准备工作 2.1   统一环境 由于CSS3兼容性问题的普遍存在,为了避

H5、CSS3属性的支持性以及flex

一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问题.(待深入研究) 二.距离上一次发布<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>转眼已过去一年,在这一年里,浏览器领域的竞争愈演愈烈.Firefox 成为新的“版本帝”但依然未能摆脱被 Chrome 超越的命运,支持更多标准的 IE10 将随着 Windows 8 在10月底正式发

纯css3实现文字间歇滚动效果

场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用Vue,已经很少操作DOM了,所以考虑最好通过CSS来实现,可以通过Vue给模板元素动态绑定class来实现相同的功能,如果需要考虑css3兼容性的话,可以去使用JavaScript去完成. 主要用到了css3的两个属性:@framekeys和animation 通过 @keyframes 规则,能够