代码之家  ›  专栏  ›  技术社区  ›  jerrygarciuh

让这个CSS在IE6中工作

css
  •  2
  • jerrygarciuh  · 技术社区  · 15 年前

    正在处理此页: http://www.karlsenner.dreamhosters.com/about.php 在IE6中导航有问题。它验证为XHTML 1.0过渡。适用于FF、IE 8、Chrome和Windows Safari。在IE6和Opera 10中,下拉菜单显示得太高。

    我尝试加入不同版本的 http://code.google.com/p/ie7-js/ 但它没有解决IE中的问题。

    CSS如下所示:

    #wrapper {
        position: relative;
        display: block;
        background-color: inherit;
        margin: 0px auto;
        padding: 0;
        width: 900px;
        min-height: 900px;
    }
    
    #nav {} 
    
    .navImage {
        position:relative;
        display:inline;
        height:102px;   /* added in hopes of helping IE position but no dice */
    }
    
    .subMenu {
        position:absolute;
        z-index:10;
        background-color:#FFF;
        top: 14px;
        left:0;
    }
    
    .subMenu a:link, .subMenu a:visited, .subMenu a:active{
        display:block;
        width:90%;
        padding:6px;
        margin:0;
        color:#3CF;
        font-family:Tahoma, Geneva, sans-serif;
        font-size:14px;
        text-decoration:none;
        font-weight:bold;
    }
    
    .subMenu a:hover{
        display:block;
        width:90%;
        padding:6px;
        margin:0;
        color:#3CF;
        background-color:#CCC;
        font-family:Tahoma, Geneva, sans-serif;
        font-size:14px;
        text-decoration:none;
        font-weight:bold;
    }
    

    jquery滚动:

    $('#navcompany').hover(function () {
        $('#companyMenu').css('display', 'block'); 
        $('#companyImg').attr('src','g/nav/company_over.gif');
    }, function () {
        $('#companyMenu').css('display', 'none');
        $('#companyImg').attr('src','g/nav/company.gif');
    });
    

    和其中一个细胞。由于菜单是从php出来的,ie不尊重宽度,所以我只使用php来获取导航图像的宽度,并将其动态写入样式。解决了宽度问题,因为IE的行为就像从包装器继承宽度一样。这可能是他们为什么不出现在他们的导航图像下面的线索,但我不能排序。

    <div id="navcompany" class="navImage" style="width:128px">
      <a href="about.php">
        <img src="g/nav/company_over.gif" name="companyImg" width="128" height="102" border="0" id="companyImg"  alt="company" />
      </a>
      <div id="companyMenu" class="subMenu" style="display:none; width:128px">
        <a href="about.php">About us</a>
        <a href="location.php">Our location</a>
      </div>
    </div>
    

    非常感谢您的建议!

    JG

    1 回复  |  直到 15 年前
        1
  •  4
  •   vinhboy    15 年前
    .navImage {
    position:relative;
    display:inline;
    height:102px;   /* added in hopes of helping IE position but no dice */
    }
    

    您正在将其设置为inline div,但它实际上不是inline div。它的使用方式更像是 display: block;

    IE6中 .navImage 呈现为一个块,这就是您看到差异的原因。

    你应该做 .导航图像 显示:块; 和使用 float: left;

    还要记得清理浮球。

    那么你的 top:14px 将更改为 top: 102px;