CSS菜单栏隐藏在IE11以下的pdf只有

我想获取水平菜单栏上方的PDF标签对象我试过了多个选项（仅适用于IE浏览器），这是我通过互联网找到的，但没有人帮助我。下面是我尝试过的代码（这也是从一个网站的例子复制）。CSS菜单栏隐藏在IE11以下的pdf只有

<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml" lang="en-us"><head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>IE Dropdown Bug Fix | jonathanstegall.com</title> 
<style type="text/css"> 
     body { 
      text-align: center; 
      font: normal 76% Verdana, Arial, Helvetica, sans-serif; 
      padding: 1em; 
      line-height: 1.8em; 
     } 

     #wrapper { 
      width: 770px; 
      margin: 0 auto; 
      text-align: left; 
      border: 1px solid #ddd; 
      padding: 20px 10px; 
     } 

     #wrapper #header { 
      position: relative; 
      z-index: 2; 
     } 

     #wrapper #nav { 
      clear: both; 
      margin: 0 5px; 
      padding: 0 5px; 
      width: 750px; 
      height: 30px; 
      list-style: none; 
      border-top: 1px solid #335a86; 
      border-bottom: 1px solid #335a86; 
      text-align: center; 
      position: relative; 
      z-index: 2; 
     } 

     #wrapper #nav li { 
      float: left; 
      margin: 0; 
      padding: 0 0 5px 0; 
      border: 0; 
      position: relative; 
     } 

     #wrapper #nav li a { 
      margin: 0; 
      padding: 7px 15px; 
      display: block; 
      text-decoration: none; 
      font-size: 1.2em; 
     } 

     #wrapper #nav a:link, #wrapper #nav a:visited { 
      color: #888; 
     } 

     #wrapper #nav a:hover, #wrapper #nav a:focus { 
      color: #335a86; 
     } 

     #wrapper #nav li ul { 
      background-color: #ccc; 
      border: 0; 
      width: 150px; 
      height: auto; 
      list-style: none; 
      margin: 0; 
      padding: 5px 0 10px 0; 
      border: 0; 
      text-align: left; 
      position: absolute; 
      display: none; 
     } 

     #wrapper #nav li ul li { 
      float: none; 
      margin: 0; 
      line-height: 30px; 
      height: 30px; 
     } 

     #wrapper #nav li ul a { 
      padding: 7px 10px; 
      white-space: nowrap; 
      display: block; 
     } 

     #wrapper #nav li:hover ul { 
      display: block; 
     } 

     #wrapper #container { 
      padding: 10px; 
      position: relative; 
     } 

     #wrapper h1 { 
      position: absolute; 
      left: 10px; 
      top: 10px; 
      height: 60px; 
      line-height: 60px; 
      vertical-align: middle; 
      font-size: 2em; 
      background: #335a86; 
      color: #fff; 
     } 

     #wrapper #container p.intro { 
      margin-top: 60px; 
     } 

     #wrapper #container p { 
      margin: 1em 0; 
     } 

     #wrapper #container form { 
      padding: 1em 0; 
     } 

     #wrapper #container label, #wrapper #container select { 
      float: left; 
      display: block; 
      margin: 0 1em 0 0; 
     } 
</style> 
    </head> 
    <body> 
    <div id="wrapper"> 
    <div id="header"> 
    <ul id="nav"> 
    <li><a href="#">home</a></li> 
    <li><a href="#">item one</a> 
     <ul> 
     <li><a href="#">sub item one</a></li> 
     <li><a href="#">sub item two</a></li> 
     <li><a href="#">sub item three</a></li> 
     <li><a href="#">sub item four</a></li> 
     <li><a href="#">sub item five</a></li> 
     <li><a href="#">sub item six</a></li> 
     </ul> 
    </li> 
    <li><a href="#">item two</a> 
     <ul> 
     <li><a href="#">sub item one</a></li> 
     <li><a href="#">sub item two</a></li> 
     </ul> 
    </li> 
    </ul> 
    </div> 
    <div id="container"> 

    <h1>Hi. This is a positioned H1</h1> 
    <p class="intro">This page is just some friendly content to show you just how bad IE really is. You could replace the absolutely positioned H1 above with a <code>&lt;select&gt; &lt;/select&gt;</code> as I do below, a Flash movie, or whatever you like.</p> 
    <form name="form" id="form"> 
     <label>To indicate this:</label> 
     <select name="foo" id="foo"> 
     <option value="IE is mean">IE is mean</option> 
     <option value="IE sucks">IE sucks</option> 
     <option value="Maybe IE8 will be okay">Maybe IE8 will be okay</option> 
     </select> 
    </form> 
    <object id="pdfshow" style="background-color:#FFFFFF;" data="1.pdf??wmode=transparent" type="application/pdf" width="99.5%" height="550"> 
    </object> 
    </div> 
    </div> 

</body> 
</html>

请让我知道，我做错了，我也用过position:relative , z-index:999。这是小提琴的链接。 http://jsfiddle.net/h2knhyb4/
在此先感谢。

来源

2015-05-05 user3310063

你能做出的jsfiddle呢？ – Raptor

@Raptor新增小提琴链接，请看看 – user3310063

这篇文章可以帮助你{} http://stackoverflow.com/questions/291813/recommended-way-to-embed-pdf-in-html –

这是一个黑客，因为我使用额外的I帧旁边<ul>，但它的工作原理，我们需要在所有浏览器的方式（即FF，铬，IE11）。我发现这个答案在网络的某个地方，目前没有链接，所以更新了代码以供将来参考。

<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml" lang="en-us"><head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>IE Dropdown Bug Fix | jonathanstegall.com</title> 
    <style type="text/css"> 
    body { 
     text-align: center; 
     font: normal 76% Verdana, Arial, Helvetica, sans-serif; 
     padding: 1em; 
     line-height: 1.8em; 
    } 

    #wrapper { 
     width: 770px; 
     margin: 0 auto; 
     text-align: left; 
     border: 1px solid #ddd; 
     padding: 20px 10px; 
    } 

    #wrapper #header { 
     position: relative; 
     z-index: 2; 
    } 

    #wrapper #nav { 
     clear: both; 
     margin: 0 5px; 
     padding: 0 5px; 
     width: 750px; 
     height: 30px; 
     list-style: none; 
     border-top: 1px solid #335a86; 
     border-bottom: 1px solid #335a86; 
     text-align: center; 
     position: relative; 
     z-index: 2; 
    } 

    #wrapper #nav li { 
     float: left; 
     margin: 0; 
     padding: 0 0 5px 0; 
     border: 0; 
     position: relative; 
    } 

    #wrapper #nav li a { 
     margin: 0; 
     padding: 7px 15px; 
     display: block; 
     text-decoration: none; 
     font-size: 1.2em; 
    } 

    #wrapper #nav a:link, #wrapper #nav a:visited { 
     color: #888; 
    } 

    #wrapper #nav a:hover, #wrapper #nav a:focus { 
     color: #335a86; 
    } 

    #wrapper #nav li ul { 
     background-color: #ccc; 
     border: 0; 
     width: 150px; 
     height: auto; 
     list-style: none; 
     margin: 0; 
     padding: 5px 0 10px 0; 
     border: 0; 
     text-align: left; 
     position: absolute; 
     display: none; 
    } 

    #wrapper #nav li ul li { 
     float: none; 
     margin: 0; 
     line-height: 30px; 
     height: 30px; 
    } 

    #wrapper #nav li ul a { 
     padding: 7px 10px; 
     white-space: nowrap; 
     display: block; 
    } 

    #wrapper #nav li:hover ul { 
     display: block; 
    } 

    #wrapper #container { 
     padding: 10px; 
     position: relative; 
    } 

    #wrapper h1 { 
     position: absolute; 
     left: 10px; 
     top: 10px; 
     height: 60px; 
     line-height: 60px; 
     vertical-align: middle; 
     font-size: 2em; 
     background: #335a86; 
     color: #fff; 
    } 

    #wrapper #container p.intro { 
     margin-top: 60px; 
    } 

    #wrapper #container p { 
     margin: 1em 0; 
    } 

    #wrapper #container form { 
     padding: 1em 0; 
    } 

    #wrapper #container label, #wrapper #container select { 
     float: left; 
     display: block; 
     margin: 0 1em 0 0; 
    } 
    .cover 
    { 
    position:absolute; 
    z-index:-2; 
    } 
    </style> 
    </head> 
    <body> 
    <div id="wrapper"> 
    <div id="header"> 
    <ul id="nav"> 
    <li><a href="#">home</a></li> 
    <li><a href="#">item one</a> 
    <ul> 
    <iframe src="about:blank" class="cover" /> 
    <li><a href="#">sub item one</a></li> 
    <li><a href="#">sub item two</a></li> 
    <li><a href="#">sub item three</a></li> 
    <li><a href="#">sub item four</a></li> 
    <li><a href="#">sub item five</a></li> 
    <li><a href="#">sub item six</a></li> 
    </ul> 
</li> 
<li><a href="#">item two</a> 
    <ul> 
    <iframe src="about:blank" class="cover" /> 
    <li><a href="#">sub item one</a></li> 
    <li><a href="#">sub item two</a></li> 
    </ul> 
</li> 
</ul> 
</div> 
<div id="container"> 

    <h1>Hi. This is a positioned H1</h1> 
    <p class="intro">This page is just some friendly content to show you just how bad IE really is. You could replace the absolutely positioned H1 above with a <code>&lt;select&gt; &lt;/select&gt;</code> as I do below, a Flash movie, or whatever you like.</p> 
<form name="form" id="form"> 
    <label>To indicate this:</label> 
    <select name="foo" id="foo"> 
    <option value="IE is mean">IE is mean</option> 
    <option value="IE sucks">IE sucks</option> 
    <option value="Maybe IE8 will be okay">Maybe IE8 will be okay</option> 
    </select> 
    </form> 
    <object id="pdfshow" style="background-color:#FFFFFF;" data="1.pdf" type="application/pdf" width="99.5%" height="550"> 
    </object> 
    </div> 
    </div> 

</body> 
</html>

来源

2015-05-07 08:58:47 user3310063

-1

以上的黑客似乎没有工作 - 添加设备罩起来部分的样式表和IFRAME线在的jsfiddle的HTML代码没有解决问题 - 下拉菜单显示为空白框在IE11中没有内容？

来源

2015-11-03 20:37:34 Jorge

CSS菜单栏隐藏在IE11以下的pdf只有

回答

相关问题