一些html标签没有显示在任何iPad safari浏览器中（safari或Chrome应用程序）

Question

我的html代码未在任何版本的iPad（1/2/3/4）浏览器中显示（safari或chrome app）

html代码：

<div id="hoauthWidgetyw0" class="hoauthWidget" style="float:left;">
    <span><a title="Sign in with Google" href="/user/auth/oauth/provider/Google" class="zocial hidden-md icon google">Sign in with Google</a></span>
    <span><a title="Sign in with Facebook" href="/user/auth/oauth/provider/Facebook" class="zocial hidden-md icon facebook">Sign in with Facebook</a></span>
    <span><a title="Sign in with Twitter" href="/user/auth/oauth/provider/Twitter" class="zocial hidden-md icon twitter">Sign in with Twitter</a></span>
    <span><a title="Sign in with LinkedIn" href="/user/auth/oauth/provider/LinkedIn" class="zocial hidden-md icon linkedin">Sign in with LinkedIn</a></span>
</div> 

我的网站使用bootstrap作为主要样式，但自定义css与hoathWidget＆amp; zocial Divs / span是：

    @charset "UTF-8";
div.hoauthWidget{float:left}
div.hoauthWidget span,div.hoauthWidget p{display:inline-block;padding-right:5px;float:left}
.zocial,a.zocial{border:1px solid #777;border-color:rgba(0,0,0,0.2);border-bottom-color:#333;border-bottom-color:rgba(0,0,0,0.4);color:#fff;-moz-box-shadow:inset 0 .08em 0 rgba(255,255,255,0.4),inset 0 0 .1em rgba(255,255,255,0.9);-webkit-box-shadow:inset 0 .08em 0 rgba(255,255,255,0.4),inset 0 0 .1em rgba(255,255,255,0.9);box-shadow:inset 0 .08em 0 rgba(255,255,255,0.4),inset 0 0 .1em rgba(255,255,255,0.9);cursor:pointer;display:inline-block;font:bold 100%/2.1 "Lucida Grande",Tahoma,sans-serif;padding:0 .95em 0 0;text-align:center;text-decoration:none;text-shadow:0 1px 0 rgba(0,0,0,0.5);white-space:nowrap;-moz-user-select:none;-webkit-user-select:none;user-select:none;position:relative;-moz-border-radius:.3em;-webkit-border-radius:.3em;border-radius:.3em}
a.zocial:hover,a.zocial:focus,a.zocial:active{color:#fff}
.zocial:before{content:"";border-right:.075em solid rgba(0,0,0,0.1);float:left;font:120%/1.65 zocial;font-style:normal;font-weight:400;margin:0 .5em 0 0;padding:0 .5em;text-align:center;text-decoration:none;text-transform:none;-moz-box-shadow:.075em 0 0 rgba(255,255,255,0.25);-webkit-box-shadow:.075em 0 0 rgba(255,255,255,0.25);box-shadow:.075em 0 0 rgba(255,255,255,0.25);-moz-font-smoothing:antialiased;-webkit-font-smoothing:antialiased;font-smoothing:antialiased}
.zocial:active{outline:none}
.zocial.icon{overflow:hidden;max-width:2.4em;padding-left:0;padding-right:0;max-height:2.15em;white-space:nowrap}
.zocial.icon:before{padding:0;width:2em;height:2em;box-shadow:none;border:none}
.zocial{background-image:-moz-linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.05) 49%,rgba(0,0,0,.05) 51%,rgba(0,0,0,.1));background-image:-ms-linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.05) 49%,rgba(0,0,0,.05) 51%,rgba(0,0,0,.1));background-image:-o-linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.05) 49%,rgba(0,0,0,.05) 51%,rgba(0,0,0,.1));background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.1)),color-stop(49%,rgba(255,255,255,.05)),color-stop(51%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));background-image:-webkit-linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.05) 49%,rgba(0,0,0,.05) 51%,rgba(0,0,0,.1));background-image:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.05) 49%,rgba(0,0,0,.05) 51%,rgba(0,0,0,.1))}
.zocial:hover,.zocial:focus{background-image:-moz-linear-gradient(rgba(255,255,255,.15) 49%,rgba(0,0,0,.1) 51%,rgba(0,0,0,.15));background-image:-ms-linear-gradient(rgba(255,255,255,.15) 49%,rgba(0,0,0,.1) 51%,rgba(0,0,0,.15));background-image:-o-linear-gradient(rgba(255,255,255,.15) 49%,rgba(0,0,0,.1) 51%,rgba(0,0,0,.15));background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.15)),color-stop(49%,rgba(255,255,255,.15)),color-stop(51%,rgba(0,0,0,.1)),to(rgba(0,0,0,.15)));background-image:-webkit-linear-gradient(rgba(255,255,255,.15) 49%,rgba(0,0,0,.1) 51%,rgba(0,0,0,.15));background-image:linear-gradient(rgba(255,255,255,.15) 49%,rgba(0,0,0,.1) 51%,rgba(0,0,0,.15))}
.zocial:active{background-image:-moz-linear-gradient(bottom,rgba(255,255,255,.1),rgba(255,255,255,0) 30%,transparent 50%,rgba(0,0,0,.1));background-image:-ms-linear-gradient(bottom,rgba(255,255,255,.1),rgba(255,255,255,0) 30%,transparent 50%,rgba(0,0,0,.1));background-image:-o-linear-gradient(bottom,rgba(255,255,255,.1),rgba(255,255,255,0) 30%,transparent 50%,rgba(0,0,0,.1));background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.1)),color-stop(30%,rgba(255,255,255,0)),color-stop(50%,transparent),to(rgba(0,0,0,.1)));background-image:-webkit-linear-gradient(bottom,rgba(255,255,255,.1),rgba(255,255,255,0) 30%,transparent 50%,rgba(0,0,0,.1));background-image:linear-gradient(bottom,rgba(255,255,255,.1),rgba(255,255,255,0) 30%,transparent 50%,rgba(0,0,0,.1))}
.zocial.google:before{content:"G"}
.zocial.google{background-color:#00c500}
.zocial.facebook:before{content:"f"}
.zocial.facebook{background-color:#00c500}
.zocial.twitter:before{content:"T"}
.zocial.twitter{background-color:#00c500}
.zocial.linkedin:before{content:"L"}
.zocial.linkedin{background-color:#00c500}

iPad视图（不行）：

iPhone视图（确定）：

Answer 1

如果您查看http://getbootstrap.com/css/#grid-options上的引导程序文档，您会看到中型设备（md）是屏幕大小介于992px和1199px之间的设备。根据你的模拟，Ipad的屏幕大小为1024，这意味着hidden-md会隐藏你的元素。