Such arrows are implemented with CSS-3 and the entire code is as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/> <title>Document</title> <styletype= "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> <ahref="#"class= "U-scrollload-tips">Click to see more forum interactions<I></I></a></Body></HTML>
The arrows are displayed normally in each mobile browser, but there is a problem with the native browser that comes with Android 2.x, the arrows are in the wrong direction, such as:
Solution:
Add this property to. u-scrollload-tips I to resolve
-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);
Mobile front-end compatibility note-Android 2.x comes with native browser arrow issues
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
