移动前端兼容性笔记 - 安卓2.x 自带原生浏览器箭头问题

  这样的箭头用CSS-3实现,整段代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <title>Document</title>
    <style type="text/css">
    .u-scrollLoad-tips{color:#767676;text-align:center;height:40px;line-height:40px;text-decoration:none;display:block;background:#f4f4f4;}
    .u-scrollLoad-tips i{display:inline-block;position:relative;vertical-align:top;width:10px;height:10px;}
    .u-scrollLoad-tips i:after{content:‘‘;display:block;width:8px;height:8px;border-color:#767676 #767676 transparent transparent;border-width:1px;border-style:solid;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);top:15px;left:5px;position:absolute;}
    </style>
</head>
<body>
    <a href="#" class="u-scrollLoad-tips">点击查看更多论坛互动<i></i></a>
</body>
</html>

  箭头在各移动浏览器都能正常显示,但在安卓 2.x 自带的原生浏览器就出现了问题,箭头方向不对,如下图:

  

解决方案:

  给.u-scrollLoad-tips i 添加 此属性即可解决  

-webkit-transform:translate(0px,0px) translateZ(0px);-ms-transform:translate(0px,0px) translateZ(0px);-o-transform:translate(0px,0px) translateZ(0px);transform:translate(0px,0px) translateZ(0px);
时间: 2024-11-03 23:47:51

移动前端兼容性笔记 - 安卓2.x 自带原生浏览器箭头问题的相关文章

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

web前端开发笔记(2)

web前端开发笔记(1) 一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必须闭合. 页面中不要用 进行缩进,如需缩进,用css控制. html标签使用必须语义化. 要为img标签填写alt和title属性. 二.HTML静态页面出现中文乱码如何解决? 引入<meta charset="UTF-8"> 三.通常情况下块属性标签和

Web前端开发笔记整理

web前端开发笔记: 1.web前端之html_day1 2.web前端之html_day2 3.web前端之css_day1

2017-2-15从0开始前端学习笔记-文本

2017-2-15从0开始前端学习笔记-文本 标签 文本 粗体和斜体 <b>bold粗体</b> <i>italic斜体</i> 上标和下标 <sup>上标</sup> <sub>下标</sub> 空白 换行符和水品线 <br/>换行符 <hr/>水平线 语义化标记 加粗和强调 <strong>加粗 加强语气</strong> <em>强调 斜体 能改

WEB前端学习笔记 四

接上一篇,web学习笔记 四,在此感谢您对此篇笔记的认可,但转发时请注明文章出自网知博学. 2.0  html的语法格式 html的标签要写在尖括号中 :<> 在在英文输入法状态下,按住shift键然后再按它左侧的尖括号就可了, 先学习一个简单的h1标签,是个标题标签,在html中这样写: <h1>我在h1标签中,我就是标题</h1> 那么h1标签中所包裹的文字,就标记成标题了.通过浏览器的解析后在页面上显示出来的效果就是字体加粗,加黑,和word中的标题性质一样! 大

前端开发笔记(1)html基础

HTML介绍 HTML是HyperTextMarkupLanguage超文本标记语言的缩写 HTML是标记语意的语言 编辑器 任何纯文本编辑器都能够编辑html,比如记事本,editplus,notepad++ 比较有名的专门制作网页工具有:DreamWeaver (Adobe公司的产品,过时了,不是一个好的代码编辑器) Sublime (高效率的程序书写工具) WebStorm (更高级的项目级别编程工具) 文档头声明 任何一个标准的HTML页面,第一行一定是一个以 我们现在学习的是HTML4

WEB前端学习笔记 五

接web前端学习笔记第四篇,此篇为web学习笔记 五,在此感谢您的采集和转发,但请注明文章出自网知博学. 2.0.3  html标签的属性格式 现在我们知道了两个双标签分别是,标题标签:<h1> - <h6>.和段落标签:<p></p>还知道了一个换行的单标签:<br />,现在我们给<p></p>标签添加一个属性,来改变段落是右对齐,还是左对齐,还是居中. 如上图,<p>标签中的 align(中文就是排列的意

Web前端学习笔记(001)

....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记                                    2016年6月15日10:38:53    /****************************************************************begin******************************

前端兼容性探讨

这里和朋友们简单探讨一下个人对于前端兼容性的一些理解: 在项目中,前端主要处理html,css,javaScript代码,当然还有可能接触到razor等渲染引擎方面的知识,不过主要处理的还是HTML.CSS.JavaScript.个人认为兼容性的问题也是对这三个方面进行处理. 首先,是html方面兼容性的处理,大家都知道,虽然有一个W3c标准的存在去规范html.xml/xhtml/css/javaScript/dom的标准,但是这只是个标准,真正体现出效果的是浏览器,而浏览器却有很多种,fir