Home >Web Front-end >HTML Tutorial >Mobile front-end compatibility notes
Mobile front-end compatibility notes
- WBOYOriginal
- 2016-06-24 11:54:471211browse
Such arrows are implemented using CSS-3. The entire code is as follows:
<!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> The arrows work fine in all mobile browsers displayed, but there is a problem in the native browser that comes with Android 2.x. The arrow direction is wrong, as shown below:
Solution:
Add this attribute to .u-scrollLoad-tips i to solve the problem
-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);
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn