Some pits and workarounds for mobile Front end (appearance)

Problem Description	Environment and frequency	Workaround
Border-radius percent failure	android2.3.x	Set a larger value such as border-radius:9999px
Placeholder the text of the property setting is skewed upward.	android4.x Partial Models	Line-height:normal
IOS5 and later versions are supported. IOS4 and the following versions are not supported and will be treated as static.	Android 2.1 and the following versions are not supported. Android 2.2 does not maintain a fixed position during scrolling and returns to the fixed position when scrolling is complete. Android 2.3 supports fixed, but requires the page to disallow zooming. Android support Fixed.
If a CSS3 transform element contains fixed positioning elements, in the WebKit core browser, the fixed positioning element will be invalidated, its actual positioning effect is similar to absolute positioning, will follow the scroll bar scrolling!	Ios	Avoid nesting fixed-positioned elements inside elements that have CSS3 transform applied.
The default style of Input,button on WebKit and select can be disabled by the following code and then customized.		-webkit-appearance:none;
When the parent element (ancestor Element) of the video tag is set to the transform style, the label is detached from the document flow	Some Android models	Avoid using transform, if you need to set the displacement, you can use absolute positioning plus top/left instead
When the body is set to 100% height, it may be blocked by the bottom navigation bar in the mobile browser:	Each mobile browser often appears	Document.documentElement.style.height = window.innerheight + ' px '

Using the Border-image property to implement physical 1px

. border-image-1px {border-width:1px 0px; -webkit-border-image:url ("Data:image/png;base64, ivborw0kggoaaaansuheugaaaaeaaaaecayaaabp2fu6aaaacxbiwxmaaastaaaleweampwyaaaktwldq1bqag90b3nob3agsundihbyb2zpbguaahjanvn3w jp3fj7f92upvkly8lgxbieaiioscmgqwaiqkgbhhbasqmwfiapwfburnehvxilvckidiokgklhnqyqiwotvxdjuh9yntx167+3t+9f7voec5/ zoec8pgbesjphmomoaovkfpdryh49psmtjvyacfujgbcaq5svczwxfaadwa3l4fnswp/wbr28aagbw1s4kesfh/ 4o6uczxaccraoaieuclazbsamguvmguamgyalbts2qkajqaagx5feiiakonaoz0st4fanipk9wxaniihkkiai0bajkoryqcqlsayfwbuiwcwmiaokxaii4ewk 4bgfm2mkccgl0fahaowjapqgaagjlclmwaidgcaemee80diewdoddsv+ Cpx3cfuegbamdllc2xs9izfliv0bp38vdg4ihiwmyxqmexkrbmceqinjebixni5wnmzgwaabr50ch+od+q5+bk4ezm52zv9mwi/mvwbyi+ifhf /rymagqaee7p79pf5exwa3dhabb1v2upwwdavgbo3/ldm9sjofok0hr5i3k4/eaenqfqydwdhaolc+0lyqg9moolpv8z4w/gi372/eae/ tt68abxmkczrccjg/1xyw52rlko58seqjfu9+cj/seff/2okdhinlfclbwk8vijufaitcd5uvkrrchjleis6x8y8r+w/ Qmtdw0arizpwe62b7xlbmb+7geciw5y0nyaqh7zlywac5eaegc0mnn3aactv/mpqcsbam2xpomaalzogfyolbdmxggaaesggsqwqqcmwrsswa6cwr28wbccyqzeqawkwdwqqgbkgbwkoriwqrluwdryblwwaxqgezrheltbmtgn5+ Asxihrcbcgybiewhi8hgkeqcgie2ehoogryo7yis4if5mobcjhsdssgkqg6yguuslfyhkkaqlcapfdscpylxiuoy1cqpqq28ggmor8irxhmzsbsled1aj1qlm Ohxqkxqbz0xq0d12alqjr0rq0hj2atqkn0uvodxqafyqoy4drmq5mjnlhxiyhrwcjwbomxxzj5vg1vo81yx1yn3yvg8ceye8ijaklgbpscf6eemjsgpcqr1hm weoojewjtbk6cfcjg4qxwicik6hptcv6evneegi6szbyrqwm7ieeiz4lxicoe1+tscqoyzlktgohjzaysqtja0jbsc2ku6q+ 0hbpnewm65btyd7kclkarccxkbeqd5bpkvvjw+s3fdrfiojmcaikuqsueko1zt/ lbkwfmkkzokprzame1aiqidqfwkltohzql1ohqrm0dzolzzswq8uklapv0jppz2n3ac/pdloj3ymerzfql9jr6afp5+ md9hcmdyyng8diyigzaxl7gacytxkvmuymbdoxmchumncyg5lnma+ yb1vykvyqfbwryhkvopvwlx6v56puvxnvp9v5qgtuq1upq15wfazgvbnq46kj1bar1akdvbupnq7oundsj1dpuv+jvl/ 9gvpjdbkghuaghkijvgo3xhmnirbgmmxxwelwclyd6yxrme1iw7l57ex2bfsbdi97tfndc6pmrgarzp3mcc0bdsax4pa52zxkzihodc57lqmtpy2x1mqtzq1 +rtfaetq+2mltcu0w7eva73vwnucdlj31om0693ujuja6ubqfutt1z+o+02preekj9cr1dund0uf1bfsj9rfq79bv0r83mdqinpazbde4y/ Dmkgpoa5hpunhwhogoectoupheakprsamnucbuh2fjnxgxpmasbxxirdtezdxrpgfiatlbpmskxes+ Kc2ua5pmutg003tmzmgs3kzyrmnsjjnvngueyb7zvnv8jywlrzzfsos2i8ew2pz8ywwwtzb3rjhwplz5vvvw16xj1lzrlott1ldsubtxmwybopvltqitm63ed ptt3xtifi8p0in1u27amez87arsmuwg7tn2yfyl9m32zx3mhbid1jt0o3xydhxmdmxwvouk4ttdqcspw+ lxzxtnoxod8zuxpkuqyxkxdpcxu22niqdun3rlleua7rrstdp1o5u7m9yt2w3u3cw9xx2r+ 00umxvjxcm970h08pdy4nhm452nm6fc85dnl152xlle+70et7ocjp7wmg3i28rb4l3le2a6pj1l+s7paz7gpgkfep+hvqa+it89vin+ 1n6zfgf8nvs7+sv9j/i/4xnyfvfobwabwqhlab2bgogza2sdhwszbkuhnqwnbbsglww+ fuimcq1zh3ktb8ax8hv5yzpczyya0rxkcj0vwhv6mmwmtb7wey6gzwjfeh5vpvlm6cy2cijgr2yiub9pgzkx+ x0uksoyqi7qubrtdhf09yzwrorz+2e9jvgpqyy5o9tqtnj2z6xqbfjsy+ ybuic4qribeif4rfgxenqtjantiete2mq9ienzaudsmjoc5jpulnrjruxcorkx5unoy553pfk1wzb8oiwyepeyp+ wdiejqlxhp5adutr0t8osbhu9fvqknolgxt7hkpjlmnvav9jjdo31d+migt0z1xjmjt1irezezkrkj801wrnberm/ zcdktozscljyjug1plrqr1zc3kldpzisrkw3keeztyhuth8r35cp5c/pbfwyftngjtfkuua4wtc+ok3hbgft4uei9sfrum99m/ Ur5iwucfny9klbqulcz2lh4wfhgir9fuxyji1mxdy4xxvk6zhhp8nj9y2jlspb9uojyulxyannc8o5sg9klpumrglc0lamuycturvrauwmvyzvkve9ql9vbvn 8qf5vfrhcsqk74sea45ujxtl/vfpv5bdra3kq3yu3rsouk626s91m/ r0q9akhv0ibwda0b8y3lg19tst50oxpq9y7ntm3kzqm1ytxtw8y2rnvyotaj9nqdf13lvv2tq7e+2sba1r/ dd3vzdomdftve75tsvlurefdrvuv99w7s7oldjxpig7q/5n7dued3t8wej3ulewf2re/ranrvbnyvv7+ ycw1sno0esdpw5zuab9qb7zp3txbakg7cqexbj9+mfhvjuoihzspcw83fmx+39qjrshkr0jq/dawto22gpag97+imo50dxh1hvrf/ fu8x42n1xzwpv56gnsg98fnkgppjp2snnp1opz3umdx590z8mwtduv29z0ppnj8xdo5mt1/3yfpe549d8lxw9cl3ytslt0utpa49r35w/ efir1tv62x3y+1xpk509e3ro9hv03/6asdvc9f41y5dn3m978bsg7dujt0cucw69fh29u0xdwrutnxdeo94r/y+2v3qb/op6n+0/rflwg3g+ gdaym/dwq/vdgmhnv6u/9oh4djhzefvi0yjjy+dhx8bdrq98mtok+gnsqctz8p+vv9563or59/94vtlz1j82pal+ yvpv655qfny76uprzrhi8cfvm55pfgm/k3o233vuo+638e9h5ko/ed+uppr+mphp9bp9z7nfp78l/ee8/ sl0p8zaaaaigniuk0aaholaacagwaa+ F8AAIDPAAB1MAAA6MAAADQYAAAXB5JFXUYAAAACSURBVHJABMEBDQAADMMGCKV1R20H1WXZONOPAER9BJAKC4KUAAAAAELFTKSUQMCC ") 2 0 Stretch;}

　　

Some pits and workarounds for mobile Front end (appearance)