在IE9盒阴影不呈现使用正确的CSS，适用于Firefox，Chrome

我想模拟浮动模式框类型的东西，但有一个问题与IE9和它的盒子阴影实现。在IE9盒阴影不呈现使用正确的CSS，适用于Firefox，Chrome

下面是我使用的可以复制的问题代码的一个总结：

<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>

它工作正常，在Firefox/Chrome浏览器等，但IE9不会显示阴影。我可以将它改变成一个嵌入的阴影，它看起来应该是这样，但外面的阴影仍然不能逃避我。

任何人都可以在这个阴影问题上揭露一些光？

来源

2011-04-11 Arowin

刚刚有同样的问题[插入拳头震动] – 2013-01-21 10:01:16

111

正如发现（不是我）在评论中，您必须将border-collapse: separate;添加到box-shadow不处理的元素。

并从我的原始答案，也请确保您有一个有效的DOCTYPE作为第一行，如<!DOCTYPE html>。点击F12调出开发工具，并确保IE9模式（或更高版本）正在使用，因为它需要box-shadow工作。

来源

2011-04-11 06:27:55 thirtydot

干杯的是，丢失的文档类型是与示例页面的问题。可惜的是，这个问题依然存在于我正在处理的实际网站上。布局与我给出的示例非常相似，但是我似乎没有做任何事情可以使背景阴影（但插图工作）。我担心我可能无法找到问题，它可能只是他们生活的东西:) – Arowin 2011-04-11 22:01:02

如果你很好，这对我来说很好:)虽然，如果你可以创建，我会再看一遍一个（JS斌）测试案例，肯定会发生问题。 – thirtydot 2011-04-11 22:05:12

+16

好的，我做了一些更多的调查，发现问题是什么...... *叹*所以，我在网站上的div是在一张桌子（旧学校桌面布局）里，边界折叠设置为'坍方'。出于某种原因，这种设置意味着盒子阴影不会画出来。我只是需要关闭边界崩溃，它的工作原理...我会尝试在这里发布示例代码，让其他人可能知道它 - 谢谢你的帮助，虽然:) – Arowin 2011-04-11 22:57:15

就确认这个问题，并2nd'ing @ Arowin的最终解决办法，因为它可能会被一些人错过 - 添加border-collapse:separate;受影响<div> - IE9现在显示正确的阴影时，<div>包含在<table>与border-collapse:collapse;集。谢谢！

来源

2011-06-11 00:01:51 toyNN

这是我的问题;使用'box-shadow'在'div'上设置'border-collapse'。 – 2011-11-17 19:18:56

我有同样的问题。实际上，IE9不需要这些样式的任何文档类型来工作。造成这个问题的原因是带阴影的表格上的“border-collapse：collapse” - 使用cellspacing = 0，然后运行 - 仍然是：bugger IE

来源

2011-09-03 09:17:54

Ooops - 即时通讯不好意思，但我在测试中并不完全正确 - 看起来doctype对于这些工作是必不可少的。但随后一切都会崩溃。我认为下一次病态写入IE首先然后其他人 - 嘿玛贝这是微软的战略一直！ – 2011-09-03 10:06:50

真棒，谢谢你。 – 2012-01-11 10:17:43

而不是'cellspacing = 0'，使用'style =“border-collapse：separate; border-spacing：0;”'保持纯粹的CSS-CSS – megaflop 2012-02-15 14:06:18

在我的案例中，从过渡型切换到严格的XHTML-doctype有所帮助。

从容器表中删除border-collapse也有帮助。

来源

2011-10-06 11:55:04 Alex

在我的情况下没有任何帮助。经过调试的时间，我发现下面的元标记为问题：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

来源

2011-11-01 09:01:39

是的，如果你对你的CSS一些HTML元素，比如做一些复位（我自己刚刚从旧项目复制和粘贴的东西，从来没有想着后果：d）：

html, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, img, dl, dt, dd, ol, ul, 
li, legend, table, tbody, tr, th, td { 
    order:0; 
    outline:0; 
    font-weight:inherit; 
    font-style:inherit; 
    font-size:100%; 
    font-family:inherit; 
    border-spacing: 0; 
    border-collapse: collapse; 
}

嗯......那切 ~~border-collapse: collapse~~ 离开那里，并添加它作为一个独立的

table, tbody, tr, th, td { 
    border-collapse: collapse; 
}

...所以它不适用于您的div，p，span，img或任何您需要阴影的地方。

来源

2011-11-16 18:07:32 Allisone

我有一个在表格单元格内的div。在div上使用border-collapse:separate为我解决了这个问题。

来源

2012-02-02 16:42:05 dfmiller

IE9输入框 - 影子错误解决方案将适用于此错误。

input{ 
box-shadow: 0px 0px 5px #3699FF; 
border-collapse: separate; 
}

border-collapse: separate;是您需要添加以解决表上的此问题。

来源

2012-02-08 17:19:55 dodortus

The border-collapse: separate;只为我部分解决了。我们将背景色添加到选定（和展开）行下的行（tr）和阴影。

背景颜色阻挡了阴影，因为它似乎是一个Z索引种类问题。无论如何，我们用颜色的rgba值来解决它。我们选择较暗的行颜色并使用20％作为alpha值，以便可以显示阴影下方的阴影。

 
table { border-collapse: separate;} 

tr:nth-child(even) { /* odd color transparent */ 
    /* background-color: someothercolor; */ /*shadow did not display thru solid color */ 
    background-color: rgba(168,163,136,.2); 
}

来源

2012-10-19 12:31:21 Avec

在我的情况下，IE 9的渲染在兼容模式下的文件，即使我有一个有效的DOCTYPE。我在本地调试，IE浏览器设置了“在兼容性视图中显示Intranet站点”，这显然是默认启用的。禁用此功能后，一切都按预期工作。这可以在工具 - >兼容性视图设置下找到。

来源

2012-11-11 14:26:52

此元标记为我解决了它。这也解决了不Chrome和Firefox出现其他奇怪的IE问题：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

来源

2014-02-14 00:31:51 Sean

在IE9盒阴影不呈现使用正确的CSS，适用于Firefox，Chrome

回答

相关问题