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

Question

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

我尝试在页面加载所有元素后通过 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 / LESS

  #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 链接使用 google 字体。

更新：2016 年 4 月 19 日 在向页面添加元素（例如 Flash 和各种其他 html、css 和图像）时，此错误再次发生，只是在页面重新加载时出现的频率较低。

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