在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

回答

相關問題