Question

我有一个简单的多层（3）UL＆gt; LI导航有一些JS和CSS打了它。一切正常。在我添加嵌入页面的YouTube视频iFrame之前，在加载/重新加载页面时链接消失，然后下一次加载它们再次出现。大多数情况下它们都不可见，它在IE，FF，Edge，Safari和Opera上运行良好，它只是谷歌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>');
}

HTML OF iFRAME

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

NAV的HTML RENDER：

    <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

解决方案：

请勿在页面上使用youtube iframe。

或

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

更新时间：2016年4月19日在向页面添加元素（如Flash）以及其他各种html，css和图像时，只需在页面重新加载的频率下重新发生此错误。

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

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

1 个答案: