css - 在网页上嵌入 YouTube iFrame 会导致我的 UL LI 导航中的 A 链接消失

Question

我有一个简单的多层 (3) UL > LI 导航，其中包含一些 JS 和 CSS。一切正常。在我向页面添加 YouTube 视频 iFrame 嵌入之前，加载/重新加载页面时链接消失，然后下一次加载它们再次出现。大多数情况下它们是不可见的，它在 IE、FF、Edge、Safari 和 Opera 上都运行良好，它只是 Google Chrome(PC Win 10，所有最新版本的浏览器)。

我尝试在页面加载所有 a 元素后通过 jQuery 设置 CSS 样式，添加随机元素，将 html 标签更改为某些内容然后再返回，甚至尝试使用 GSAP 为文本和背景的颜色设置动画但没有强制重置CSS。我在 chrome 代码检查器中实时观看了字体(颜色 RGBA)补间值，但什么也没有。如果我检查页面，所有代码都是完美的。

目前在开发服务器上，因此无法提供事件预览。

唯一的解决方法是删除所有 css 或 iframe。

还有其他人有什么想法吗？

额外的使用 viemo iFrame 进行了测试，所有功能都已恢复，所以 youtube iframe 是问题所在。iFrame代码:

if ($article["youtube_header"] != "" && $article["youtube_header"] != null){
//echo('<iframe width="100%" height="400" src="https://www.youtube.com/embed/' . $article["youtube_header"] . '?wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>');
}

iFRAME 的 HTML

<iframe width="100%" height="400" src="https://www.youtube.com/embed/9SvpZ1OkvdE?wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

导航的 HTML 渲染:

    <div id="aftc-nav">
    <div class="nav-top">Menu</div>
    <ul id='navulFsQTke4' data-tier='1'  class='nav-ul-tier-1'>
    <li><a href='/Dev/AFTC/AFTC_2016/www/category/cat-1-url' data-nid='166' data-pid='' data-cid='54' data-url='cat-1-url'  class='nav-a-tier-1' nav-first-a'>cat1</a></li>
    <li><a href='#' data-nid='167' data-pid=''  class='nav-a-tier-1 nav-parent'>cat2</a>
    <ul id='navulEmODx6F' data-tier='2'  class='nav-ul-tier-2'>
    <li><a href='/Dev/AFTC/AFTC_2016/www/article/art-2' data-nid='168' data-pid='167' data-aid='29' data-url='art-2' class='nav-a-tier-2'>art 2</a></li>
    <li><a href='/Dev/AFTC/AFTC_2016/www/article/art-1' data-nid='174' data-pid='167' data-aid='28' data-url='art-1' class='nav-a-tier-2'>art 1</a></li>
    </ul>
    </li>
    </ul>
    <div class="nav-btm"></div>
    </div>

CSS/更少

  #aftc-nav {

  }

  #aftc-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
  }

  #aftc-nav ul li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: pointer;
  }

  #aftc-nav .nav-top {
    display: block;
    padding: 4px;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    background: #333333;
    color: #FFFFFF;
    .roundTop;
    border-bottom: 1px solid #000000;
  }

  #aftc-nav .nav-btm {
    display: block;
    height: 30px;
    background: #333333;
    .roundBtm;
    border-top: 1px solid #000000;
  }

  #aftc-nav .nav-first-a {

  }



  #aftc-nav a {
    display: block;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid #000000;
    font-weight: normal;
  }

  #aftc-nav a:Hover {

  }

  #aftc-nav a:visited {
    color: #FFFFFF;
  }

  #aftc-nav a:active {
    color: #FFFFFF;
  }

  #aftc-nav a:link {
    color: #FFFFFF;
  }




  #aftc-nav .nav-parent {
    font-size: 15px;
    font-weight: bold;
  }




  #aftc-nav .selected {
    background: #660000 !important;
  }
  #aftc-nav .selected:Hover {
    background: #990000 !important;
  }





  #aftc-nav .nav-a-tier-1 {
    padding: 3px 3px 3px 5px;
    background: #666666;
    color: #FFFFFF;
  }
  #aftc-nav .nav-a-tier-1:hover {
    background: #990000;
  }

  #aftc-nav .nav-a-tier-2 {
    padding: 3px 3px 3px 15px;
    background: #444444;
    color: #FFFFFF;
  }
  #aftc-nav .nav-a-tier-2:hover {
    background: #990000;
  }

  #aftc-nav .nav-a-tier-3 {
    padding: 3px 3px 3px 25px;
    background: #222222;
    color: #FFFFFF;
  }
  #aftc-nav .nav-a-tier-3:hover {
    background: #990000;
  }

想法？

谢谢

D

Answer 1

解决方案:

1. 不要在您的网页上使用 YouTube iframe。

或

1. 通过 JS 代码而不是 @import 或 html css 链接使用谷歌字体。

更新:19/04/2016在向页面添加元素(如 Flash 和各种其他 html、css 和图像)时，此错误会在页面重新加载时以较低的频率再次出现。

解决方案是不使用谷歌字体，我下载了字体并通过 css 直接链接它们。