javascript - IE7：李的行为很糟糕

Question

JSFiddle：http: //jsfiddle.net/F6LBV/1/

IE7 给我和我的网站带来了巨大的痛苦。尽管我很想在一条黑暗的小巷里见到微软并一劳永逸地解决这个问题，但我希望你们中的一个人能提供帮助。

IE7 以两种方式伤害了我的li标签，第一种是不尊重它们的width:auto;属性，而不是扩大到最宽的宽度li，每个都li缩小到它自己的副本加上填充的大小。

可以在这里看到：

诅咒你IE7

接下来，IE7 不尊重我的 jQuery。我有一个功能，ul当您将鼠标悬停在每个 parent 上时，它会为向下滑动设置动画li。display: none然而IE7出于某种原因（我相信它ul与

可以在这里看到：

Shuttupa你的脸，你没有尊重

所以这是我的下拉菜单的标记：

<div class="container_16">
    <div class="grid_16">
        <div id="breadcrumbs">
            <a href="http://rcnhca.org.uk/sites/first_steps" id="home"></a>
            <ul id="parent" class="grid_15 omega">
            <li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/">Personal and people development </a><ul class="child"><li><a href="http://rcnhca.org.uk/sites/first_steps/getting-started/">Getting started</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/communication/">Communication</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/health-safety-and-security/">Health, Safety and Security</a></li><li class="active" ><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/">Personal and people development </a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/quality/">Quality</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/equality-diversity-and-rights/">Equality, diversity and rights </a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/clinical-skills/">Clinical skills</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/additional-material/">Additional material</a></li></ul></li><li><a href="#">Select a topic</a><ul class="child"><li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/performance-appraisal/">Performance appraisal </a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/personal-development-planning/">Personal development planning</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/learning-and-development-opportunities/">Learning and development opportunities </a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/lifelong-learning/">Lifelong learning </a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/reflection/">Reflection</a></li></ul></li>                         </ul>

        </div>
    </div>
    <div id="supplements" class="grid_16">
        <div class="left">
            <a href="#" class="button alpha"><img src="http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/book-icon.png" alt="book icon">View competencies checklist</a>
        </div>
        <div class="right">
            <a href="#" class="button alpha bold"><img src="http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/rcn-icon.png" alt="rcn icon">Join the RCN</a>

            <a href="#" class="button omega">Reasons to joins</a>
        </div>
    </div>
</div>

和要启动的css：

#breadcrumbs {
    position: relative;
    z-index: 4;
    height: 39px;
    padding-bottom: 3px;
    background: #ffffff;
    border: 0px solid;
    border-left: #3a90a7 2px solid;
    border-right: #3a90a7 2px solid;
    border-bottom: #3a90a7 2px solid;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#breadcrumbs ul {
    list-style: none; 
    list-style-image: none; 
    margin: 0;
}

#breadcrumbs #home{
    display: block;
    position: relative;
    height: 39px;
    width: 54px;
    float: left;
    background-image: url(library/images/home_icon.png);
    background-repeat: no-repeat;
    background-position: 19px center;   
    text-indent: -999em;
}

#breadcrumbs ul#parent {
    display: block;
    height: 39px;
    float: right;
    right: 3px;
    position: relative;
    background: #f38630;
    -webkit-box-shadow: inset 0px -2px 0px 0px #cf7229;
    -moz-box-shadow: inset 0px -2px 0px 0px #cf7229;
    box-shadow: inset 0px -2px 0px 0px #cf7229;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#breadcrumbs ul#parent li {
    position: relative;
    height: 39px;
    float: left;
    min-width: 1px; /* required to fix Opera bug */
    padding: 0 47px 0 15px;
    background-image: url(library/images/breadcrumb_seperator.png);
    background-repeat: no-repeat;
    background-position: right;
    line-height: 39px;
    zoom: 1;
}

#breadcrumbs ul#parent li a {
    display: block;
    height: 42px;
    position: relative;
    font-size: 15px;
    font-weight:900;
    color: #ffffff;
    text-decoration: none;
    text-shadow: 0px 2px 0px #cf7229;
}

#breadcrumbs ul li a:visited {
    color: #ffffff;
}
#breadcrumbs ul#parent li:first-child ul {
    left: -5px;
}
#breadcrumbs ul#parent li ul {
    position: absolute;
    z-index: 9998;
    left: -28px;
    top: 42px;
    background: #ffffff;
    border-left: #3a90a7 2px solid;
    border-right: #3a90a7 2px solid;
    border-bottom: #3a90a7 2px solid;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 0 3px 0 3px;
    list-style-position: outside;
    min-width: 200px;
    width: auto;
    -webkit-box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.5);
}

.js #breadcrumbs ul#parent li ul {
    display:none;
}

.no-js #breadcrumbs ul#parent li ul {
    left: -999em;
}

#breadcrumbs ul#parent li ul li {
    float: none;
    display: block;
    position: relative;
    height: 26px;
    margin-bottom: 3px;
    padding: 0 15px;
    background-image: url(library/images/arrow-icon.png);
    background-position: -25px 50%;
    background-repeat: no-repeat;
    background-color: #738793;
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    line-height: 26px;
    white-space: nowrap;
    zoom: 1;
    width: auto;
}

#breadcrumbs ul#parent li ul li a{
    display: block;
    color: #ffffff;
    text-decoration: none;
    text-shadow: none;
    font-weight: 100;
}

#breadcrumbs ul#parent li ul li.active, #breadcrumbs ul#parent li ul li:hover{
    background-color: #3393b5;
}

#breadcrumbs ul#parent li ul li.active, .no-js #breadcrumbs ul#parent li ul li:hover{
    background-position: 0px 50%;
    text-indent: 10px;
}

.no-js #breadcrumbs ul#parent li:hover ul, .no-js #breadcrumbs ul#parent li:focus ul {
    left: -5px;
}

和动画它的jQuery：

$(document).ready(function(){

    // Fix background-position < IE8
    if ($('html').hasClass('oldie')) {
        $("ul.child li:not(.active)").each(function() {
            $(this).css('backgroundPosition', '-25px 50%');
        });
        $("#breadcrumbs ul")
    }

    //Animate dropdown menu
    $("#breadcrumbs>ul:not(.child)>li").each(function() {
        crumbWidth = $(this).width();
        if($(this).width() > $(this).children('ul.child').width()) {
            $(this).children('ul.child').width(crumbWidth + 43);
        }
    });
    $("#breadcrumbs>ul:not(.child)>li").hover(
      function () {
        var raquo = "&raquo;";
        $(this).children('ul.child').hoverFlow('mouseenter', {'height': 'show'},250).children('li:not(.active)').hover(
            function() {
                $(this).hoverFlow('mouseenter', {textIndent: 10, backgroundPosition: '-0px 50%'}, 250);
            },
            function () {
                $(this).hoverFlow('mouseleave', {textIndent: 0, backgroundPosition: '-25px 50%'}, 250);
            }
        );
      }, 
      function () {
        $(this).children('ul.child').hoverFlow('mouseleave', {'height': 'hide'}, 250).children('li').unbind();
      }
    );
});

现场直播：http ://rcnhca.org.uk/sites/first_steps/

多谢你们。

score 1 · Accepted Answer

width:100%#breadcrumbs ul#parent li ul似乎解决了这两个问题。http://jsfiddle.net/F6LBV/4

到目前为止在 IE7 和 Chrome 中进行了测试。

javascript - IE7：李的行为很糟糕

1 回答 1

Related

Reference