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

Posted 2023-03-12

【中文标题】一些 html 标签未显示在任何 iPad Safari 浏览器（Safari 或 Chrome 应用程序）中

【英文标题】：some html tags not displaying in any iPad safari browser (safari or Chrome app)

【发布时间】：2014-11-06 14:06:56

【问题描述】：

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

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 作为主要样式，但与 hoathWidget 和 zocial Divs/spans 相关的自定义 css 是：

    @charset "UTF-8";
div.hoauthWidgetfloat:left
div.hoauthWidget span,div.hoauthWidget pdisplay:inline-block;padding-right:5px;float:left
.zocial,a.zocialborder: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:activecolor:#fff
.zocial:beforecontent:"";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:activeoutline:none
.zocial.iconoverflow:hidden;max-width:2.4em;padding-left:0;padding-right:0;max-height:2.15em;white-space:nowrap
.zocial.icon:beforepadding:0;width:2em;height:2em;box-shadow:none;border:none
.zocialbackground-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:focusbackground-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:activebackground-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:beforecontent:"G"
.zocial.googlebackground-color:#00c500
.zocial.facebook:beforecontent:"f"
.zocial.facebookbackground-color:#00c500
.zocial.twitter:beforecontent:"T"
.zocial.twitterbackground-color:#00c500
.zocial.linkedin:beforecontent:"L"
.zocial.linkedinbackground-color:#00c500

iPad 视图（不好）：

iPhone 视图（好的）：

【问题讨论】：

需要查看你的css...

@cport1，用 css 编辑的问题。谢谢回复

【参考方案1】：

如果您查看http://getbootstrap.com/css/#grid-options 上的引导文档，您会发现中型设备 (md) 是屏幕尺寸在 992 像素到 1199 像素之间的设备。根据您的模拟，Ipad 的屏幕尺寸为 om 1024，这意味着 hidden-md 将隐藏您的元素。

【讨论】：

感谢@Pochen，将检查并进行更改以查看它是否解决了问题，然后将接受您的回答！再次感谢

看点@Pochen，等我长大了，想和你一样！ tks