IE9上的box-shadow无法使用正确的CSS呈现,适用于Firefox,Chrome

Question

IE9上的box-shadow无法使用正确的CSS呈现,适用于Firefox,Chrome

Aro*_*win 71 html css css3 internet-explorer-9

我正在尝试模拟浮动模式框类型的东西,但IE9及其框阴影实现有问题.

以下是我正在使用的可以复制问题的代码的摘要:

<html>
<head>
    <title>Sample page</title>
    <style>
        .content-holder {
            border-collapse: collapse;
        }
        .back {
            background-color: #a8c0ff;
            padding: 100px;
        }

        .inner {
            background-color: #fff;
            text-align: center;
            padding: 50px;
            box-shadow: 0px 0px 20px #000;
        }

    </style>
</head>
<body>
    <table class="content-holder">
        <tr>
            <td>
                <div class="back">
                    <div class="inner">
                        <h2>Heading</h2>
                        <p class="subtext">Some text here</p>
                        <p>More text</p>
                        <a class="button" href="#">A button</a>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>

Run Code Online (Sandbox Code Playgroud)

它在Firefox/Chrome等中运行良好,但IE9不显示阴影.我可以把它改成一个插入的阴影,它看起来应该如此,但外面的阴影继续躲避我.

那里的任何人能够解释这个影子问题吗？

Answer 1

thi*_*dot 111

正如在评论中发现的那样(不是我),您必须添加border-collapse: separate;到box-shadow不起作用的元素.

从我原来的答案,还要确保你有一个有效的doctype作为第一行,如<!DOCTYPE html>.点击F12调出开发人员工具,确保使用IE9模式(或更高版本),因为它需要box-shadow工作.

好吧,我做了一些调查,发现问题是什么......*叹气*所以,我在网站上的div是在一张桌子里(旧学校桌子布局),边界崩溃设置为'崩溃".由于某种原因,具有该集合意味着框阴影不会绘制.我只需要关闭边框崩溃并且它有效...我会尝试在这里发布示例代码,以便其他人可能知道它 - 感谢您的帮助虽然:) (16认同)
缺少doctype不是问题 - 边界崩溃是 (3认同)

Answer 2

toy*_*yNN 19

只是确认这一问题,并2nd'ing @ Arowin的最终解决办法,因为它可能会被一些人错过-添加border-collapse:separate;到受影响的<div>,当IE9现在显示正确的阴影- <div>包含在<table>同border-collapse:collapse;组.谢谢!

归档时间：	14 年，4 月前
查看次数：	51020 次
最近记录：	10 年，5 月前