主要用来记录如何兼容安卓手机里面按钮line-height 居中的问题
【html】
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="author" content="cc"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="generator" content="webstorm"> <!--移动端响应式--> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <!--支持IE的兼容模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--让部分国产浏览器默认采用高速模式渲染页面--> <meta name="renderer" content="webkit"> <!--页面style css--> <link rel="stylesheet" href="http://www.ysedu.com/all/css/font.css" /> <link rel="stylesheet" type="text/css" href="http://www.ysedu.com/all/css/cc.base.css"> <link rel="stylesheet" type="text/css" href="http://www.ysedu.com/all/css/swiper.min.css"> <link rel="stylesheet" type="text/css" href="http://www.ysedu.com/all/css/cc.mobile.css"> <title>北京教师招聘考试公告</title> <meta name="description" content="<?=$seo['description']?>"> <meta name="keywords" content="<?=$seo['keywords']?>"> <!--JQ库--> <script src="http://www.ysedu.com/all/js/jquery-1.8.3.min.js"></script> <script src="http://www.ysedu.com/all/js/swiper.min.js"></script> <script src="http://www.ysedu.com/all/js/cc.mobile.js"></script> <link rel="stylesheet" href="css/gzgg.css"> </head> <body> <div id="header"> <div class="logo"></div> <a class="tel" href="tel:4006255668"></a> </div> <div id="banner" class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=""><img src="./img/gzgg_banner1.png" alt="" width="100%"></a></div> <div class="swiper-slide"><a href=""><img src="./img/gzgg_banner1.png" alt="" width="100%"></a></div> <div class="swiper-slide"><a href=""><img src="./img/gzgg_banner1.png" alt="" width="100%"></a></div> </div> </div> <div id="nav"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><div class="area" data="cy">全部</div></div> <div class="swiper-slide"><div class="area" data="cy">朝阳</div></div> <div class="swiper-slide"><div class="area" data="xc">西城</div></div> <div class="swiper-slide"><div class="area" data="dx">大兴</div></div> <div class="swiper-slide"><div class="area" data="hd">海淀</div></div> <div class="swiper-slide"><div class="area" data="hr">怀柔</div></div> <div class="swiper-slide"><div class="area" data="sjs">石景山</div></div> <div class="swiper-slide"><div class="area" data="mtg">门头沟</div></div> <div class="swiper-slide"><div class="area" data="ft">丰台</div></div> <div class="swiper-slide"><div class="area" data="dc">东城</div></div> <div class="swiper-slide"><div class="area" data="my">密云</div></div> <div class="swiper-slide"><div class="area" data="tz">通州</div></div> <div class="swiper-slide"><div class="area" data="cp">昌平</div></div> <div class="swiper-slide"><div class="area" data="sy">顺义</div></div> <div class="swiper-slide"><div class="area" data="yq">延庆</div></div> <div class="swiper-slide"><div class="area" data="fs">房山</div></div> <div class="swiper-slide"><div class="area" data="fs">燕山</div></div> <div class="swiper-slide"><div class="area" data="pg">平谷</div></div> </div> </div> </div> <div id="ad"> <a href=""><img src="./img/gzgg_ad.png" width="100%" alt=""></a> </div> <div id="notice"> <table> <tr> <th>区县</th> <th>18招聘公告</th> <th>19招聘公告</th> </tr> <tr id="cy"> <td>朝阳区</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>已公布 <span><a href="" class="jq">加群</a></span></td> </tr> <tr id="xc"> <td>西城区</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>已公布 <span><a href="" class="jq">加群</a></span></td> </tr> <tr id="dx"> <td>大兴区</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>待公布 <span><a href="" class="jq">加群</a></span></td> </tr> <tr id="hd"> <td>海淀区</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>待公布 <span><a href="" class="jq">加群</a></span></td> </tr> <tr id="hr"> <td>怀柔区</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>待公布 <span><a href="" class="jq">加群</a></span></td> </tr> <tr id="sjs"> <td>石景山区</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>待公布 <span><a href="" class="jq">加群</a></span></td> </tr> <tr id="mtg"> <td>门头沟区</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>待公布 <span><a href="" class="jq">加群</a></span></td> </tr> <tr id="ft"> <td>丰台区</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>待公布 <span><a href="" class="jq">加群</a></span></td> </tr> <tr id="dc"> <td>东城区</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>待公布 <span><a href="" class="jq">加群</a></span></td> </tr> <tr id="my"> <td>密云区</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>已公布 <span><a href="" class="jq">加群</a></span></td> </tr> <tr id="tz"> <td>通州区</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>待公布 <span><a href="" class="jq">加群</a></span></td> </tr> <tr id="cp"> <td>昌平区</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>已公布 <span><a href="" class="jq">加群</a></span></td> </tr> <tr id="sy"> <td>顺义区</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>待公布 <span><a href="" class="jq">加群</a></span></td> </tr> <tr id="yq"> <td>延庆区</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>待公布 <span><a href="" class="jq">加群</a></span></td> </tr> <tr id="fs"> <td>房山区（含燕山）</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>待公布 <span><a href="" class="jq">加群</a></span></td> </tr> <tr id="pg"> <td>平谷区</td> <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td> <td>待公布 <span><a href="" class="jq">加群</a></span></td> </tr> </table> </div> <div id="zixun"> <a href="javascript:void(0);" onclick=""><div class="zxzx">公招课程</div></a> <a href="javascript:void(0);" onclick=""><div class="lqzl">历年真题</div></a> </div> <script> var mySwiper = new Swiper('#banner.swiper-container',{ loop: true, autoplay: { delay: 1000 }, speed: 600, }); var mySwiper2 = new Swiper('#nav .swiper-container',{ loop: true, slidesPerView: 6, spaceBetween: 30, }); //滑动到指定位置 $("#nav .area").click(function(){ var _data = $(this).attr("data"); scrollTo('#'+_data,300); }); function scrollTo(ele, speed){ if(!speed) speed = 300; if(!ele){ $("html,body").animate({scrollTop:0},speed); }else{ if(ele.length>0) $("html,body").animate({scrollTop:$(ele).offset().top},speed); } return false; } </script> </body> </html>
【CSS】
body{ background-color: #fff; padding: 0 .32rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #header{ height: .52rem; width: 100%; position: relative; margin: .32rem auto; } #header .logo{ width: 2.18rem; height: 0.52rem; background: url(../img/gzgg_logo.png) no-repeat center; -webkit-background-size: 100% 100%; background-size: 100% 100%; position: absolute; top: 0; left: 0; } #header .tel{ display: block; width: 2.22rem; height: 0.30rem; background: url(../img/gzgg_tel.png) no-repeat center; -webkit-background-size: 100% 100%; background-size: 100% 100%; position: absolute; top: .12rem; right: 0; } #nav{ margin: .5rem auto; position: relative; width: 7.18rem; } #nav .area{ width: 1rem; height: 0.52rem; line-height: .52rem; background-color: #fff; font-size: 0.26rem; color: #000; background-color: #ededed; text-align: center; -webkit-border-radius: .05rem; -moz-border-radius: .05rem; border-radius: .05rem; } #nav .area:hover, #nav .area:active{ background-color: #ff6100; color: #fff; } #notice{ margin: .5rem auto 1rem; } #notice table{ width: 100%; text-align: center; border: none; border-collapse: collapse; } #notice tr{ height: .64rem; } #notice tr:first-child{ background: url(../img/gzgg_bg_table.jpg) no-repeat center; -webkit-background-size: cover; background-size: cover; } #notice tr:nth-of-type(odd){ background-color: #e7f6f7; } #notice tr:last-child{ border-bottom: .04rem solid #b1dadd; } #notice th{ height: .82rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: .1rem; } #notice th{ border: none; border-left: .04rem solid #62b5ba; border-right: .04rem solid #62b5ba; font-size: 0.32rem; color: #fff; } #notice td{ border: none; border-left: .04rem solid #b1dadd; border-right: .04rem solid #b1dadd; font-size: 0.26rem; color: #000; } #notice td a.ck{ display: inline-block; width: 2.12rem; height: 0.72rem; line-height: .72rem; text-align: center; font-size: .52rem; transform: scale(0.5); color: #ff7052; border-collapse: separate; -webkit-border-radius: .4rem; -moz-border-radius: .4rem; border-radius: .4rem; border: 1px solid #ff7052; } #notice td a.jq{ display: table-cell; width: 1.06rem; height: 0.36rem; text-align: center; font-size: .26rem; color: #fff; background-color: #f4803e; -webkit-border-radius: .2rem; -moz-border-radius: .2rem; border-radius: .2rem; } #zixun{ width: 7.5rem; height: .96rem; line-height: 1.1rem; background-color: #fff; background: rgba(5,5,5,0.40); position: fixed; bottom: 0; left: 0; text-align: center; } #zixun .zxzx, #zixun .lqzl{ display: table-cell; vertical-align: middle; width: 2.24rem; height: .56rem; border: 1px solid #FF7052; -webkit-border-radius: .5rem; -moz-border-radius: .5rem; border-radius: .5rem; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: .4rem; font-size: .26rem; color: #000; line-height: normal; background: url(../img/gzgg_icon_zxzx.png) no-repeat .3rem center #fff; -webkit-background-size: 15%; background-size: 15%; } #zixun .lqzl{ background-image: url(../img/gzgg_icon_lqzl.png); } #zixun a:last-child{ margin-left: .5rem; }