CSSシャドーは、ChromeまたはFirefoxにないIE/Edgeで動作します。

Question

このリストの数字は、ChromeまたはFirefoxで影がありません（白いだけです）。 IE/Edgeには影があります。私は、FirefoxとChromeにも影を表示しようとしています。

私が代わりに＃000で、各テキスト・シャドーラインの末尾にRGBA（0,0,0,1）を追加しようとしたが、それは（このような）動作しませんでした：

はしませんでしたここでは、以下のコードのjsfiddleだ

text-shadow: 
    3px 3px 0 rgba(0,0,0,1), 
-1px -1px 0 rgba(0,0,0,1), 
    1px -1px 0 rgba(0,0,0,1), 
    -1px 1px 0 rgba(0,0,0,1), 
    1px 1px 0 rgba(0,0,0,1); 

仕事： https://jsfiddle.net/wxLftaLd/

CSS

#main { 
color: #fff; 
text-shadow: 
    3px 3px 0 #000, 
-1px -1px 0 #000, 
    1px -1px 0 #000, 
    -1px 1px 0 #000, 
    1px 1px 0 #000; 
left: -200px; 
margin: auto; 
margin-top: auto; 
position: relative; 
top: 150px; 
width: auto; 
font-size: 1.5em; 
} 

ol { 
    list-style-position: inside; 
    padding-left: 0; 
} 

HTML

<div id="main"> 
      <h1 class="center">Friends list</h1> 
      <ol> 
       <li>Erin</li> 
       <li>Jacob</li> 
       <li>Frankie</li> 
       <li>Bob</li> 
      </ol> 
</div> 

Answer 1

次のことを試してみてください。私のお気に入りの

#main { 
    color: #fff; 
    text-shadow: 
    3px 3px 0 #000, 
    -1px -1px 0 #000, 
    1px -1px 0 #000, 
    -1px 1px 0 #000, 
    1px 1px 0 #000; 
    left: -200px; 
    margin: auto; 
    margin-top: auto; 
    top: 150px; 
    width: auto; 
    font-size: 1.5em; 
} 

ol { 
    counter-reset: li; 
    list-style-type: none; 
} 

ol li { 
    position:relative; 
} 

ol li:before { 
    content: counter(li)'.'; 
    counter-increment: li; 
    position:absolute; 
    right:100%; 
    margin-right:10px; 
    text-shadow: 
     3px 3px 0 #000, 
    -1px -1px 0 #000, 
     1px -1px 0 #000, 
    -1px 1px 0 #000, 
     1px 1px 0 #000; 
}