在IE8和IE11上的盒子陰影問題

Question

在容器的HTML下面使用HTML & CSS。在現代瀏覽器中沒有問題。在IE8上，框陰影不工作..所以填充白色背景失蹤。

在IE11上，不確定爲什麼1px邊界切斷髮生。縮放級別100％。

HTML

<div class="head-row"> 
    <div class="head-featured"> 
    <h1> 
     <span>Your ambitions. Our Solutions.</span> 
    </h1> 
    </div> 
</div> 

CSS

.head-row{ 
    width: 47%; 
} 

.head-featured { 
    background: none; 
    margin-top: 5px; 
    padding: 0 18px 0 20px; 
    top: 0; 
    min-height: 50px; 
} 

.head-row .head-featured span{ 
    display: inline; 
    background-color: #fff; 
    font-size: 2.375em; 
    color: #292576; 
    padding: 5px 0; 
    line-height: 1.7em; 
    box-decoration-break: clone; 
    -webkit-box-decoration-break: clone; 
    -moz-box-shadow: 20px 0 0 #fff, -20px 0 0 #fff; 
    -webkit-box-shadow: 20px 0 0 #fff, -20px 0 0 #fff; 
    box-shadow: 20px 0 0 #fff, -20px 0 0 #fff; 
    zoom: 1; 
} 

Answer 1

CSSIE8不支持，因爲it needs IE9+。您可以使用模擬一些filter類似的輸出：

.box-shadow { 
    zoom: 1; 
    filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=20, OffY=0, Color=#ffffff); 
} 

您可能read more約box-shadow。

在行動

.head-row{ 
 
    width: 47%; 
 
} 
 

 
.head-featured { 
 
    background: none; 
 
    margin-top: 5px; 
 
    padding: 0 18px 0 20px; 
 
    top: 0; 
 
    min-height: 50px; 
 
} 
 

 
.head-row .head-featured span{ 
 
    display: inline-block; 
 
    background-color: #fff; 
 
    font-size: 2.375em; 
 
    color: #292576; 
 
    padding: 5px 0; 
 
    line-height: 1.7em; 
 
    -webkit-box-decoration-break: clone; 
 
    box-decoration-break: clone; 
 
    -moz-box-shadow: 20px 0 0 #efefef, -20px 0 0 #efefef; 
 
    -webkit-box-shadow: 20px 0 0 #efefef, -20px 0 0 #efefef; 
 
    box-shadow: 20px 0 0 #efefef, -20px 0 0 #efefef; 
 
    zoom: 1; 
 
    filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=20, OffY=0, Color=#efefef); 
 
}

<div class="head-row"> 
 
    <div class="head-featured"> 
 
    <h1> 
 
     <span>Your ambitions. Our Solutions.</span> 
 
    </h1> 
 
    </div> 
 
</div>

做什麼用的舊的瀏覽器？

我認爲你不應該猴子與你的CSS提供類似的外觀，並支持舊版瀏覽器。相反，您可以選擇應用Progressive enhancement的原則。