css - IE8伪:hover bug

Question

向您解释我的意思的最佳方式，您可以在视频中看到。请注意光标。我第一次尝试针对 IE8 优化我的网站。我希望有办法解决这个问题。提前致谢!

http://www.youtube.com/watch?v=V0wQGcZKTvc - 左侧为 IE8，右侧为 Chrome

CSS

.toggle:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 5px;
    z-index: 1;
}

.toggle:after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 5px;
    z-index: 1;
}

.toggle h3 {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: #864747;
    font-size: 14px;
    padding: 10px 2px 10px 2px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==); /* 1x1px transparent gif */
}

.toggle-cont {
    display: none;
    position: relative;
    padding-bottom: 10px;
    text-shadow: -1px -1px rgba(240,238,224,1), 1px 1px rgba(240,238,224,1);
}

.tshadow:before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: '';
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q2ZDRjOCIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZDZkNGM4IiBzdG9wLW9wYWNpdHk9IjAuNzUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q2ZDRjOCIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  rgba(214,212,200,0.9) 0%, rgba(214,212,200,0.75) 50%, rgba(214,212,200,0.25) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,212,200,0.9)), color-stop(50%,rgba(214,212,200,0.75)), color-stop(100%,rgba(214,212,200,0.25))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(214,212,200,0.9) 0%,rgba(214,212,200,0.75) 50%,rgba(214,212,200,0.25) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(214,212,200,0.9) 0%,rgba(214,212,200,0.75) 50%,rgba(214,212,200,0.25) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(214,212,200,0.9) 0%,rgba(214,212,200,0.75) 50%,rgba(214,212,200,0.25) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(214,212,200,0.9) 0%,rgba(214,212,200,0.75) 50%,rgba(214,212,200,0.25) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6d6d4c8', endColorstr='#40d6d4c8',GradientType=0 ); /* IE6-8 */
}

.toggle {
    position: relative;
    padding: 0 14px;
    -moz-box-shadow: 0 0 3px rgba(68,68,68,0.3);
    -webkit-box-shadow: 0 0 3px rgba(68,68,68,0.3);
    box-shadow: 0 0 3px rgba(68,68,68,0.3);
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAMElEQVQIW2N89ODyfwYk8PXrNwZGZEGQADc3F0IQJgDSBFaJLAAWvH715H+QFmQAABDVHcpHFfxXAAAAAElFTkSuQmCC); 
    }

.tdivider {
    display: none;
    position: relative;
    height: 1px;
    width: 100%;
    content: '';
    background: rgba(170, 169, 162, 0.6);
    border-bottom: 1px solid #f0eee0;
    margin-bottom: 8px;
}

.tarrow {
    position: absolute;
    top: 14px;
    right: 18px;
    margin: 0 0 0 0;
    width: 8px;
    height: 14px;
    content: '';
    background: url("../img/arrow.png");
    cursor: pointer;
}

DOM

<div class="toggle ">
    <div class="tshadow">
        <h3># Explanation</h3>
        <div class="tarrow rotate2"></div>
        <div class="tdivider"></div>
        <div class="toggle-cont">
            <ol>
                <li>sadasd</li>
                <li>asd</li>
                <li>as</li>
                <li>d</li>
                <li>as</li>
           </ol>
        </div>
    </div>
</div>

jQuery

 $("#single-full-column div.tshadow h3").click(function(e) {
        e.preventDefault();
        $(this).parent().find($(".toggle-cont")).stop().slideToggle();
        $(this).parent().find($(".tdivider")).stop().toggle("slow");
        $(this).parent().find($(".tarrow")).stop().toggleClass("rotate1 rotate2");
    });

................................................ ...................................................

Answer 1

没有 IE8 来测试，但我认为你可以做的是让你的元素具有高度和总宽度，希望它有帮助