Question

http://www.webdevout.net/test?013&raw。

缩小IE6/7的窗口,看我所说的话。

我删除了我申请中的所有关键部分,但基本上这些灰色箱应该放下。在现代浏览器中,它做了精细......但在IE6/7中,页面内容遮掩了它(以及一些导航链接......)。我可以提供更多必要的信息,让我知道。

(page & Code @ abovelink, and also listed here forlight)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8"> 

  <title>Test</title> 
  <style type="text/css">
/* RESET ------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0; }

body {
  font-size: 62.5%; }

/* END OF RESET ------------------------------ */
/* ======= GENERAL SITE STYLES ==================== */
a img {
  border: none; }

h1 {
  font-weight: bold;
  font-size: 19px;
  color: #333;
  margin-bottom: 20px; }

h2 {
  margin: 10px 0;
  font: bold 11px Verdana;
  color: #333; }

html, body {
  height: 100%; }

body {
  font-family: Verdana;
  border: 0;
  width: 100%;
  position: relative; }

/*Opera Fix*/
body:before {
  content: "";
  height: 100%;
  float: left;
  width: 0;
  margin-top: -32767px; }

form label {
  display: block; }

.page_defaults {
  height: 100%;
  width: 100%;
  position: relative; }

#header {
  width: 100%;
  height: 60px;
  padding: 15px 0;
  background: #FFFFFF;
  position: relative; }

#header_nest {
  float: right;
  margin-right: 5%; }
  #header_nest img {
    display: inline-block;
    vertical-align: middle; }
    body.ie6 #header_nest img, body.ie7 #header_nest img {
      display: inline; }
  #header_nest p {
    font: normal 10px Verdana;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin: 0 25px 0 15px; }
    body.ie6 #header_nest p, body.ie7 #header_nest p {
      display: inline; }

ul#nav {
  padding: 0 0 0 20px;
  position: relative;
   }
  ul#nav li {
    display: inline-block;
    vertical-align: middle;
    font: normal 11px Verdana, sans-serif;
    list-style-type: none; }
    body.ie6 ul#nav li, body.ie7 ul#nav li {
      display: inline; }
    ul#nav li h2 {
      display: inline-block;
      vertical-align: middle;
      z-index: -1;
      margin: 0;
      font: normal 11px Verdana, sans-serif; }
      body.ie6 ul#nav li h2, body.ie7 ul#nav li h2 {
        display: inline; }
      ul#nav li h2 a {
        display: inline-block;
        vertical-align: middle;
        z-index: 4;
        text-decoration: none;
        position: relative;
        color: #999;
        padding: 20px 10px 20px 40px;
        white-space: nowrap; }
        body.ie6 ul#nav li h2 a, body.ie7 ul#nav li h2 a {
          display: inline; }
  ul#nav li.mega {
    position: relative; }
  ul#nav li.mega div {
    position: absolute;
    z-index: 5;
    padding: 10px;
    border-left: 1px solid #999;
    border-right: 3px solid #999;
    border-bottom: 2px solid #999;
    top: 52px;
    left: 0;
    margin-right: 40px;
    background: #CCC;
     }
    ul#nav li.mega div h3 {
      display: inline;
      font: bold 13px Verdana, sans-serif; }
  ul#nav li.hovering div {
    display: block; }
  ul#nav img {
    position: absolute;
    z-index: -1;
    top: 50%;
    margin-top: -12px;
    left: 8px; }

/* --------- Main portion (content, sidebar) ---------- */
#wrap {
  min-height: 100%;
  position: relative; }

#main {
  overflow: auto;
  padding-bottom: 150px;
  position: relative; }

#content-wrapper {
  float: left;
  width: 100%; }

#content {
  padding: 40px;
  overflow: auto;
  position: relative; }

#contentwrapper {
  float: left;
  min-height: 100%;
  overflow: hidden;
  width: 100%;
  position: relative; }


/* NEW STYLES ------------------------- */
body.ie7 #main {
  display: table;
  height: 100%; }

body.ie6 #main {
  float: left; }
body.ie6 #wrap {
  display: table;
  height: 100%; }


.dataset {
  position: relative; }

.fg-toolbar {
  clear: both; }

/* --------- Bottom portion (footer) -------------------- */
#footer {
  position: relative;
  margin-top: -150px;
  height: 150px;
  clear: both;
  background: #333; }



  </style>
</head> 


<!--[if lte IE 6]>
<body class="ie6">
<![endif]--> 
<!--[if lte IE 7]>
<body class="ie7">
<![endif]--> 
<!--[if gte IE 8]><!--> 
<body> 
<!--<![endif]--> 

<div id="" class="page_defaults grp_dash"> 
  <div id="wrap"> 
  <div id="header"> 
    <div id="header_nest"> 

      <p>Hello, <strong>User</strong><br /> 


<a href="/help/contact/">Get Help</a> |


        <a href="/logout/">Logout</a> 
      </p> 
    </div> 
  </div> 

  <ul id="nav"> 


<li class="mega"> 
  <h2><a href="/">Test</h2></li> 


    <li class="mega" style="z-index: 40;"> 
        <h2><a href="#">Test</a></h2> 
        <div> 
            <h3>Test</h3> 
            <p> 
                <a href="">Test</a>,
                <a href="">Test</a>,
                <a href="">Test</a>,
                <a href="">Test</a> 
            </p> 
        </div> 
    </li> 



    <li class="mega"> 
        <h2><a href="#">Test</a></h2> 
        <div> 
            <h3>Test</h3> 
            <p> 
                <a href="#">Test</a>,
                <a href="#">Test</a>,
                <a href="#">Test</a>,
                <a href="#">Test</a>,
                <a href="#">Test</a>,
                <a href="#">Test</a> 
            </p> 
        </div> 
    </li> 


    <li> 
        <h2><a href="#">Test</a></h2> 
    </li> 

    <li class="mega"> 
        <h2><a href="#">Test</a></h2> 
        <div> 
            <h3>Test</h3> 
            <p> 

                <a href="#">Test</a>,


                <a href="#">Test</a> 

            </p> 
            <h3>Test</h3> 
            <p> 

                <a href="#">Test</a> 


</p> 
            <p> 
            <a href="#">Test</a> 
            <p> 
        </div> 
    </li> 

  </ul> 


    <div id="main"> 
      <div id="contentwrapper"> 
      <div id="content"> 

        <h1>Page Title</h1> 


<h2>Subtitle</h2> 









      </div> 
      </div> 


    </div> 



  </div> 
  <div id="footer"> 
    <ul> 

    </ul> 
  </div> 

</div> 




</body> 
</html>

Answer 1

参看。该条描述了如何绕过该条。

友情链接