移动前端兼容性笔记 - 安卓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);
移动前端兼容性笔记 - 安卓2.x 自带原生浏览器箭头问题的更多相关文章
- web前端开发笔记(1)
一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必 ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
- 前端开发笔记(1)html基础
HTML介绍 HTML是HyperTextMarkupLanguage超文本标记语言的缩写 HTML是标记语意的语言 编辑器 任何纯文本编辑器都能够编辑html,比如记事本,editplus,note ...
- web前端开发笔记(2)
一.什么是作用域. 所有变量都存在于一个执行环境中(也称作用域),这个执行环境决定了变量的生命周期,以及哪一部分代码可以访问其中的变量.总结: 执行环境有全局执行环境和函数执行环境. 每次进入一个新执 ...
- Web前端学习笔记之前端跨域知识总结
0x00 前言 相信每一个前端er对于跨域这两个字都不会陌生,在实际项目中应用也是比较多的.但跨域方法的多种多样实在让人目不暇接.老规矩,碰到这种情况,就只能自己总结一篇博客,作为记录. 0x01 什 ...
- Web前端兼容性指南
一.Web前端兼容性问题 一直以来,Web前端领域最大的问题就是兼容性问题,没有之一. 前端兼容性问题分三类: 浏览器兼容性 屏幕分辨率兼容性 跨平台兼容性 1.浏览器兼容性问题 第一次浏览器大战发生 ...
随机推荐
- Android中的Apk的加固(加壳)原理解析和实现(转)
一.前言 今天又到周末了,憋了好久又要出博客了,今天来介绍一下Android中的如何对Apk进行加固的原理.现阶段.我们知道Android中的反编译工作越来越让人操作熟练,我们辛苦的开发出一个apk, ...
- java 颁发公钥 私钥 php js RSA 加密解密整合
PHP rsa密钥生成 加密解密 - PHP开发 - CSDN博客 https://blog.csdn.net/duzhenxun/article/details/8879227 <?php c ...
- php array_merge和运算符+
其实很多时候我都很疑惑为什么同维度的数组不能直接使用运算+直接进行相加,然后结果就是两个数组合并的在一起的新结果,这个就有点跟array_merge合并函数类似了,接下来就来看下这两种合并的方式到底有 ...
- python sort、sorted高级排序技巧(转)
add by zhj: 没找到原文.可以按多个维度进行排序,而且可以指定他们的排序方向,如果维度都是数字,排序比较容易,用+/-号就可以 指定排序方向.否则,就调用多次sorted进行排序了,而且要按 ...
- mysql 数据操作 多表查询 准备
为什么需要多表查询: 因为我们不可能把所有数据都放在一张表里 我们把不同数据存储 放在一张一张不同表 方便管理,但我们为了方便管理,把数据拆分到一张一张表去存储. 但是数据还是一个整体,数据之间是有关 ...
- centos lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装,只需修改配置文件即可 安装wordpress 安装phpmyadmin 定时备份mysql两种方法 第二十五节课
centos lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装,只需修改配置文件即可 安装wordpress 安装phpmyadmin 定时备份mysql两种方法 第二十五节 ...
- js-template-art【二】语法
参看地址 一.模板语法 1.变量使用与输出 <% if (user) { %> <h2><%= user.name %></h2> <% } %& ...
- h5前端项目常见问题汇总
原文作者:FrontEndZQ 原文链接:https://github.com/FrontEndZQ/HTML5-FAQ H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度 ...
- python16_day36【爬虫1】
一.requests 1. GET请求 # 1.无参数实例 import requests ret = requests.get('https://github.com/timeline.json') ...
- C++中的常量定义
本篇笔记总结自一次代码检视. 一般来说,使用C语言编程时我们都习惯在代码当中使用C当中的宏定义来定义一个数值常量: #define MY_CONST 7 在C++开发项目时,也会经常存在沿袭C当中常量 ...