ローカルPCで正常に表示されますがサーバーではIE11でルビが表示されません。（サーバーでもEdgeやEdgeのIEモードではルビは表示されます）

前提・実現したいこと

ホームページでルビを表示し位置を調整したいと考えています。

発生している問題・エラーメッセージ

ルビを表示し位置を調整する方法を検索したところ
https://qiita.com/myzkyy/items/5f735808b45ba8dbf588
が見つかり、このソースコードをダウンロードさせていただき、
ローカルPCでIE11環境で表示したところ、紹介されている通りの結果になるのですが、
このコードをサーバーに転送しIE11で表示させるとルビが表示されなくなってしまいます。

いまだにIE環境のユーザーが多いため、IE11でも問題なく表示させたいのですが
どこに問題があるのでしょう

エラーにはなりません。

該当のソースコード

html
1<html xmlns="fttp://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
2<head>
3<mata http-equiv="Content-type" content="text/html; charset=Shift_JIS" />
4<mata http-equiv="Content-Style-type" content="text/css" />
5<mata http-equiv="Content-Script-type" content="text/javascript" />
6
7<meta name="keywords" content="Keywords" />
8<meta name="description" content="Introduction sentence" />
9
10	<link href="./test.css" rel="stylesheet" type="text/css" />
11
12<title>test page</title>
13</head>
14
15<body>
16
17<p><span data-ruby="わがはい">吾輩</span>は猫である。名前はまだ無い。</p>
18<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番<span data-ruby="どうあく">獰悪</span>な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>
19
20</body>
21</html>

css
1[data-ruby] {
2    position: relative;
3}
4[data-ruby]::before {
5    content: attr(data-ruby);
6    position: absolute;
7    top: -1em;
8    left: 0;
9    right: 0;
10    margin: auto;
11    font-size: 0.5em;
12}

試したこと

ローカルPCでIE11環境で表示
⇒紹介されている通りの結果になる。（ルビは表示されます。）
このコードをサーバーに転送しIE11で表示
⇒ルビが表示されなくなってしまいます。
サーバーのIE11で開いている画面で[Ctrl]+[Shift]+[e]でEdgeに切り替える
⇒問題なくルビが表示されました。
その状態でEdge画面からIEモードに切り替える。
⇒ルビは問題なく表示されています。