English 中文(简体)
• 低级导航:有IE bugs pt.2
原标题：Doing a top level navigation with drop downs: have IE bugs pt.2

样本代码如下。 如果你看一看,你就会看到灰色下降箱。 这些箱子存在于所有浏览器中,但IE6/IE7没有显示。 能否在这些浏览器中找到这种工作,同时又不去除对布局至关重要的风格(例如,我想去掉一个超支:一些东西的隐蔽会使其发挥作用,但打破了国际E6/IE7中的全部内容):

rel=“nofollow noreferer”>http://jsbin.com/ohufu4/edit

<!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>Title</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 ------------------------------ */
a img {
  border: none;
  display: none; }

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

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

html, body {
  height: 100%; }

body {
  font-family: Verdana; }

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

#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;
    position: relative; }
    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 {
    z-index: 30; }
  ul#nav li.mega div {
    position: absolute;
    z-index: 200;
    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;
    /* commenting out for test case: display: none;  */ }
    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 {
  padding-right: 300px; }

#content {
  float: left;
  display: inline; }

body {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  background: #fff;
  /* Minimum width remove line if not required (does not work in IE) */ }

/* column container */
.colmask {
  position: relative;
  /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
  clear: both;
  float: left;
  width: 100%;
  /* width of whole page */
  overflow: hidden;
  /* This chops off any overhanging divs */ }

/* 2 column right menu settings */
.rightmenu {
  /* display: none; */ }

.rightmenu .colleft {
  float: left;
  width: 200%;
  margin-left: -200px;
  position: relative;
  right: 100%;
  background: #fff; }

.rightmenu .col1wrap {
  float: left;
  width: 50%;
  position: relative;
  left: 50%;
  padding-bottom: 1em; }

.rightmenu .col1 {
  margin: 50px 55px 0 245px;
  /* removed temporarily: overflow:auto; */
  padding-bottom: 20px; }

.rightmenu .col2 {
  float: right;
  width: 180px;
  position: relative;
  left: 195px; }
  .rightmenu .col2 h3 {
    display: inline-block;
    color: #FFFFF;
    margin-left: -9px;
    padding: 10px 9px;
    background-color: #5D973A;
    cursor: pointer;
    width: 100%;
    color: #EEEEEE; }
    body.ie6 .rightmenu .col2 h3, body.ie7 .rightmenu .col2 h3 {
      display: inline; }

#sidebar {
  width: 200px;
  color: black;
  float: right;
  display: inline;
  height: 300px; }

#footer {
  width: 100%;
  clear: both;
  background: #333; }
  #footer ul {
    display: inline-block;
    margin: 30px; }
    body.ie6 #footer ul, body.ie7 #footer ul {
      display: inline; }
    #footer ul li {
      display: inline-block;
      list-style-type: none;
      margin: 0 9px; }
      body.ie6 #footer ul li, body.ie7 #footer ul li {
        display: inline; }
      #footer ul li a {
        color: #FFF;
        text-decoration: none;
        font: normal 1.4em Verdana, sans-serif; }

.dataset {
  display: none;
  overflow: auto;
  width: 100%;
  font: normal 13px Verdana, sans-serif;
  border-collapse: collapse;
  margin: 0 0 0 0; 
  height: 200px;
}

.dataTables_wrapper {
  margin: 0 0 40px 0; }

.dataset td {
  padding: 3px 10px; }

.dataset th {
  font: bold 10px Verdana, sans-serif;
  text-align: left;
  padding: 7px 3px 4px 10px; }

.dataTables_filter {
  margin: 8px;
  float: right; }

.dataTables_length {
  margin: 8px;
  float: left; }

.dataTables_info {
  margin: 8px;
  float: left; }

.dataTables_paginate {
  margin: 8px;
  float: right; }
  .dataTables_paginate .ui-state-default {
    padding: 2px; }

/* environmental impact styles */
#pg_environmental-impact .dataset tr.odd, #pg_reporting .dataset tr.odd {
  background-color: #DDFFDD; }
#pg_environmental-impact .dataset tr.odd td:first-child, #pg_reporting .dataset tr.odd td:first-child {
  background-color: #C4FFC4; }
#pg_environmental-impact .dataset tr.even td:first-child, #pg_reporting .dataset tr.even td:first-child {
  background-color: #D5FFD5; }

.grp_dash .dataTables_scrollBody {
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC; }

/* end environmental impact styles */
/* Login Styles */
#pg_login {
  background-color: #F5F5F5;
  width: 100%;
  height: 100%; }
  #pg_login #login_nested {
    height: 200px;
    width: 298px;
    position: absolute;
    top: 50%;
    margin-top: -100px;
    left: 50%;
    margin-left: -150px;
    text-align: right;
    font: normal 12px Verdana, sans-serif; }
    #pg_login #login_nested img {
      text-align: right;
      margin: 19px 39px 0 0; }
    #pg_login #login_nested form {
      margin-top: -10px;
      text-align: left;
      padding: 0 39px 30px; }
    #pg_login #login_nested input#submit {
      display: inline-block;
      background-color: #808080;
      color: white;
      border: none;
      padding: 10px;
      font-size: 12px;
      width: 100%;
      border-bottom: 1px solid #666;
      border-left: 1px solid #777; }
      body.ie6 #pg_login #login_nested input#submit, body.ie7 #pg_login #login_nested input#submit {
        display: inline; }
    #pg_login #login_nested ul.errorlist {
      color: red;
      margin: 5px 0; }
      #pg_login #login_nested ul.errorlist li {
        list-style-type: none;
        font: normal 10px Verdana, sans-serif; }
    #pg_login #login_nested #id_username, #pg_login #login_nested #id_password, #pg_login #login_nested .placeholder {
      padding: 7px 6px;
      margin: 3px 0px;
      width: 206px;
      position: relative;
      display: block; }
    #pg_login #login_nested .placeholder {
      color: #999; }

.grp_dash .highlights {
  display: inline-block;
  margin: 0 15px 10px 15px; }
  body.ie6 .grp_dash .highlights, body.ie7 .grp_dash .highlights {
    display: inline; }
  .grp_dash .highlights p {
    display: inline-block;
    font: normal 12px Verdana;
    text-align: center;
    margin: 0 25px 15px 0; }
    body.ie6 .grp_dash .highlights p, body.ie7 .grp_dash .highlights p {
      display: inline; }
    .grp_dash .highlights p strong {
      display: block;
      font: bold 14px Verdana; }

/* filterable pages */
#pg_reporting form fieldset, #pg_environmental-impact form fieldset {
  display: none;
  border: none; }
  #pg_reporting form fieldset ul li, #pg_environmental-impact form fieldset ul li {
    list-style-type: none; }
    #pg_reporting form fieldset ul li label, #pg_environmental-impact form fieldset ul li label {
      display: inline; }

form label {
  /* display: block; */ }

/* export module */
#export_module {
  margin-bottom: 15px;
  margin-top: -10px;
  display: none; }


</style>

</head>


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

<!--[if lte IE 7]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body><!--<![endif]-->
<div id="pg_environmental-impact" class="">
  <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="/">Blah</a></h2></li>


    <li class="mega" style="z-index: 40;">
        <h2><a href="#">Environmental Impact</a></h2>

        <div>
            <h3>Blah:</h3> 
            <p>
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>
            </p>

        </div>
    </li>



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

                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>
            </p>
        </div>

    </li>


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

    <li class="mega">
        <h2><a href="#">Blah</a></h2>

        <div>
            <h3>Blah</h3> 
            <p>

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


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

            </p>
            <h3>Miscellaneous</h3> 
            <p>

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

            </p>
        </div> 
    </li>

  </ul>

  <div class="colmask rightmenu">
    <div class="colleft">

      <div class="col1wrap">
        <div class="col1">


            <h1>Page Title</h1>



<table class="dataset">


</table>


        </div>
      </div>
      <div class="col2">
        <!-- Column 2 start -->


<h2>More filters</h2>
<p>
<a href="#">Blah</a>
<a href="#">Blah</a>
<a href="#">Blah</a>

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

</p>


<h2>Filter...</h2>








        <!-- Column 2 end -->
      </div>
    </div>
  </div>


  <div id="footer">
    <ul>

    </ul>
  </div>
</div>


</body>
</html>

EDIT:所有风格都必须放在同一个档案中,这一条件是瞄准它的最佳途径。 我在生产中拥有这一法典,它运作良好。 我知道这是一个好奇,但比我能想做的事情更好。

EDIT:我的确把我们的所有业务逻辑从本法典中删除。 有许多内容、打ty和被我删除的 j。 如何工作,是当你对导航要素进行控制时,光线下降就出现。 为了解决该问题,我删除了显示:无;从这些内容来看,现在我只是试图让这些内容出现。

最佳回答

我不敢肯定我所做的事情,但问题在我提出这个问题之前就已经确定:

为什么IE在内容后面而不是上面显示灰色盒?

该法典载有该法典。

时间：2010-07-30 14:40:37
问题回答

暂无回答


上一篇：
下一篇：


相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

时间：2009-11-13 05:37:01 回答：1 展示：1
jquery ui dialog opens only once

I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.

时间：2009-11-09 15:55:58 回答：3 展示：1
Drop down background url in Safari Issue

selectBox.selectCSS { background: url(/Images/replacementSelectBackground.png) top left no-repeat height:auto; } I have an issue in Safari only where the image is not rendering on top ...

时间：2009-11-09 15:17:34 回答：1 展示：1
CSS specific for Safari

How do you target specifically safari in css with styles?

时间：2009-11-09 14:55:29 回答：2 展示：1
Aligning textarea in a form

Ive used the following css code to align my form elements: form { position:relative; } form input { position:absolute; left:11em; } However, the textarea element is not aligned correctly with the ...

时间：2009-11-09 14:54:33 回答：4 展示：1
Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

时间：2009-11-09 14:33:21 回答：3 展示：1
CSS problem with page footer

I have defined my page footer in the css file as: #footer { position: absolute; height: 50px; text-align: center; background: #66CCCC; bottom: 0px; left: 0px; width: 100%; height: ...

时间：2009-11-09 14:28:05 回答：4 展示：1
热门标签

友情链接

Allggapp Alljchome-教程家园 mvfinale.com-影视剧情大结局大全