【问题标题】:CSS Content Text disappeared but works on mobileCSS 内容文本消失但可在移动设备上使用
【发布时间】:2018-03-22 04:28:59
【问题描述】:

尝试对旧开发人员的工作进行故障排除...我们公司网站上的标题Link Here CSS 内容不只显示边框线。不过在手机上看起来还不错。

hr.aboutUs { 填充:0;边框:无;边框顶部:1px 实心 #808080;颜色:#808080;文本对齐:居中; }

hr.aboutUs::after { content: "关于我们";显示:内联块;位置:相对;顶部:-0.7em;字体大小:1em;字体粗细:粗体;填充:0 0.75em;背景:白色; }

***它在 Safari 和 Firefox 上显示,但不在 Chrome 上

【问题讨论】:

标签: html css


【解决方案1】:

您必须在针对桌面设备的媒体查询中声明 hr.aboutUs:after

@media all and (max-width: 806px) {
    hr.aboutUs:after {
        content: "About Us";
        display: inline-block;
        top: 1.5em;
        font-size: 1em;
        font-weight: bold;
        padding: 0 0.75em;
        background: white;
        z-index: 10000;
        position: absolute;
        left: 22.5em;
    }
}

确保将其添加到第 #589 行之后。

希望这会有所帮助。 :)

【讨论】:

  • 谢谢杰曼!我让它与这个 @media all and (min-width: 0px) and (max-width: 1400px){ hr.aboutUs:after { content: "About Us"; display: inline-block; top: 1.5em; font-size: 1em; font-weight: bold; padding: 0 0.75em; background: white; z-index: 10000; position: absolute; left: 37%; right: 37%; } } 一起工作
  • 为任何有同样问题的人找出问题...我需要添加溢出:可见;
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-01-26
  • 2018-07-30
  • 1970-01-01
  • 2021-08-16
  • 1970-01-01
相关资源
最近更新 更多