2

我正在制作一个简单的工作网站来测试我在 Web 开发和 IE 中的技能，当我动态更改页面的内容时，底部框阴影会留下一些副本......

这是在我动态更改内容之后：

在此处输入图像描述

谁能告诉我为什么会这样。这是 IE 的正常行为吗？

这是一些HTML代码：

    <div id="categories-menu" class="">
    <ul id="categories">
        <li class="category">
            <a href="/jobs/front/jobs_by_cat/">All jobs</a>
        </li>
        <li class="category">
            <a href="/jobs/front/jobs_by_cat/31">Agriculture</a>
            <a href="" class="pluss">+</a>
            <ul style="display: none;" id="subcategories">
                <li class="subcategory"><a href="/jobs/front/jobs_by_cat/32">Agriculture, Forestry and Fishing</a></li>
                <li class="subcategory"><a href="/jobs/front/jobs_by_cat/33">Landscape Architect</a></li>
            </ul>
        </li>
        <li class="category">
            <a href="/jobs/front/jobs_by_cat/34">Education</a>
            <a href="" class="pluss">+</a>
            <ul style="display: none;" id="subcategories">
                <li class="subcategory"><a href="/jobs/front/jobs_by_cat/35">College/University</a></li>
                <li class="subcategory"><a href="/jobs/front/jobs_by_cat/36">Independent Learning</a></li>
                <li class="subcategory"><a href="/jobs/front/jobs_by_cat/37">Libraries</a></li>
                <li class="subcategory"><a href="/jobs/front/jobs_by_cat/38">Preschool</a></li>
            </ul>
        </li>
        <li class="category">
            <a href="/jobs/front/jobs_by_cat/39">Government</a>
            <a href="" class="pluss">+</a>
            <ul style="display: none;" id="subcategories">
                <li class="subcategory"><a href="/jobs/front/jobs_by_cat/40">City</a></li>
                <li class="subcategory"><a href="/jobs/front/jobs_by_cat/41">County</a></li>
                <li class="subcategory"><a href="/jobs/front/jobs_by_cat/42">Federal</a></li>
                <li class="subcategory"><a href="/jobs/front/jobs_by_cat/43">University of Wisconsin System</a></li>
            </ul>
        </li>
        <li class="category">
            <a href="/jobs/front/jobs_by_cat/44">Information Technology</a>
            <a href="" class="pluss">+</a>
            <ul style="display: none;" id="subcategories">
                <li class="subcategory"><a href="/jobs/front/jobs_by_cat/45">Computer - Hardware</a></li>
                <li class="subcategory"><a href="/jobs/front/jobs_by_cat/46">Computer - Software</a></li>
                <li class="subcategory"><a href="/jobs/front/jobs_by_cat/47">Computer Service and Call Center</a></li>
            </ul>
        </li>
        <li class="category">
            <a href="/jobs/front/jobs_by_cat/48">Labor</a>
            <ul style="display: none;" id="subcategories">
            </ul>
        </li>

    </ul>
</div>

和CSS代码：

    #categories-menu {
    clear: left;
    float: left;
    margin-top: 20px;
    width: 25%;
    background-color: rgba(0, 153, 204, 0.1);
    border: 1px dashed;
    box-shadow: 0 0 10px rgba(50, 50, 50, 0.78);
    padding: 0 20px;
}
4

1 回答 1

1

所以我拼命在网上搜索解决方案。看起来盒子阴影伪影是 IE10 中的一个已知问题。它很容易在 IE9 中通过overflow: hidden阴影元素修复。但是在 IE10 中它不能再被修复了。

一种解决方法是在动画之前移除阴影并在动画完成后将其添加回来。

于 2013-09-10T07:14:21.143 回答