IE11でページ内リンクが一部動かないバグ？について

前提・質問概要

初めての質問投稿です。失礼がありましたらすみません。
WordpressでWebサイトを作成しました。
問題はIE11でページ内リンクが1箇所のみ機能しません。
aタグの前に<br>を入れるなど、同じ症状の方の対応も参考にしましたが直りませんでした。

発生している問題

アンカーメニューは4つ並び2列計8個のaタグをflexで表示しています。
このメニューの4つ目のみページ内アンカーが機能しません。
id名は間違いありませんでした。chromeでの動作は確認して問題ありませんでした。
IEで4つ目のアンカーメニューを押すと、ブラウザ上部のアドレスバーでは『example.com/hoge/#ank04』
と表示されているのでメニュー自体は押されています。

アンカーメニューのHTMLとCSSです。内容は質問投稿用に変えてありますがほぼ一緒です。

#HTML
<div class="flex">
  <div class="flex-item"><a href="#ank01">ANKER01</a></div>
  <div class="flex-item"><a href="#ank02">ANKER02</a></div>
  <div class="flex-item"><a href="#ank03">ANKER03</a></div>
  <div class="flex-item"><a href="#ank04">ANKER04</a></div>
  <div class="flex-item"><a href="#ank05">ANKER05</a></div>
  <div class="flex-item"><a href="#ank06">ANKER06</a></div>
  <div class="flex-item"><a href="#ank07">ANKER07</a></div>
  <div class="flex-item"><a href="#ank08">ANKER08</a></div>
</div>

#CSS
.flex {
  display:flex;
  display: flex;
  max-width: 890px;
  margin: auto;
  flex-wrap: wrap;
}
.flex .flex-item {
  width: 25%;
  padding: 15px 15px;
}
.flex .flex-item a {
  display: flex;
  width: 100%;
  font-size: 22px;
  align-items: center;
  justify-content: center;
  color: #5093c7;
  background-color: #F1F8FF;
  padding: 1.09em 5px;
}

アンカーの飛び先のHTMLです。

<section class="sec-ank01" id="ank01">
 ## 内容省略
</section>

<section class="sec-ank02" id="ank02">
 ## 内容省略
</section>
  ・
  ・
  ・
<section class="sec-ank08" id="ank08">
 ## 内容省略
</section>

最後に

以上の内容でアンカーリンクが機能しなくて困っております。
同じような症状になった方などおりましたら解決策を頂けると幸いです。
宜しくお願い致します。

補足情報（FW/ツールのバージョンなど）

必要ない無さそうなモノも一応書いときます。

■ アンカーが機能していることを確認できたブラウザ
windows chrome
mac chrome
iphone safari
iphone chrome

■ アンカーが機能しなかったことを確認できたブラウザ
Internet Explorer11 (バージョン: 11.1082.1862.0 更新バージョン: 11.0.210)

■ Wordpress バージョン
5.4.2

■ Wordpress テーマ
自作テーマ

YT0014

2020/10/01 05:19

ank04を設定しているsectionタグと、その前後数行を、誤りがあると思って、ご確認ください。不要な空白や全角空白、不等号など、気づきにくい誤りがあると思われます。なお、IE以外での動作は、自動補正処理で動作している可能性があります。見つからないようなら、ブラウザの開発者ツールなどで、該当ページの全ての警告を表示し、警告箇所の見直しをしてください。

shimizu.so

2020/10/01 06:49

説明足らずで申し訳ありません質問には書いてありませんが、開発者ツールやsyntaxチェッカーなどは使用しsyntax errorはない状態だと思います。

YT0014

2020/10/01 07:46

ご回答いただいた情報は、「試したこと」で、質問時に必要な情報です。他の検証も含めて、質問欄に編集、追記してください。なお、回答者での検証を求めておられるなら、ank04の前後を、編集せずにご提示いただく必要があるかと思います。 kuma_kuma_さんも回答されていますが、ご提示いただいたコードでは、問題が再現されておらず、肝心のank04周辺が省略されている為、回答ができません。

shimizu.so

2020/10/02 00:16

すみませんでした。質問をするならsyntaxのチェックなどは当たり前の前提だと勘違いしておりました。内容の変更や、省略は公開できるものではなかったので申し訳ございません。お手数かけました。

行動規範の内容に同意します

回答2件

HTMLを以下の状態にして確認しました。(cssは変更なし)
IE、FireFox、chrome、Edge Windows64bit版
アンカーリンクは正常に機能していました。

CSS
1.flex {
2	display:flex;
3	display: flex;
4	max-width: 890px;
5	margin: auto;
6	flex-wrap: wrap;
7}
8.flex .flex-item {
9	width: 25%;
10	padding: 15px 15px;
11}
12.flex .flex-item a {
13	display: flex;
14	width: 100%;
15	font-size: 22px;
16	align-items: center;
17	justify-content: center;
18	color: #5093c7;
19	background-color: #F1F8FF;
20	padding: 1.09em 5px;
21}

HTML
1<!DOCTYPE html> 
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title></title>
6  </style>
7</head>
8<body>
9<div class="flex">
10  <div class="flex-item"><a href="#ank01">ANKER01</a></div>
11  <div class="flex-item"><a href="#ank02">ANKER02</a></div>
12  <div class="flex-item"><a href="#ank03">ANKER03</a></div>
13  <div class="flex-item"><a href="#ank04">ANKER04</a></div>
14  <div class="flex-item"><a href="#ank05">ANKER05</a></div>
15  <div class="flex-item"><a href="#ank06">ANKER06</a></div>
16  <div class="flex-item"><a href="#ank07">ANKER07</a></div>
17  <div class="flex-item"><a href="#ank08">ANKER08</a></div>
18
19
20<section class="sec-ank01" id="ank01" style="width:100px;height:300px;background-color: #f00;">
21</section>
22<section class="sec-ank02" id="ank02" style="width:100px;height:300px;background-color: #0f0;">
23</section>
24<section class="sec-ank03" id="ank03" style="width:100px;height:300px;background-color: #00f;">
25</section>
26<section class="sec-ank04" id="ank04" style="width:100px;height:300px;background-color: #ff0;">
27</section>
28<section class="sec-ank05" id="ank05" style="width:100px;height:300px;background-color: #0ff;">
29</section>
30<section class="sec-ank06" id="ank06" style="width:100px;height:300px;background-color: #fff;">
31</section>
32<section class="sec-ank07" id="ank07" style="width:100px;height:300px;background-color: #888;">
33</section>
34<section class="sec-ank08" id="ank08" style="width:100px;height:300px;background-color: #000;">
35</section>
36</div>
37</body>
38</html>
39

投稿2020/10/01 06:01

kuma_kuma_

総合スコア2506

shimizu.so

2020/10/01 06:56

検証ありがとうございます。ですが実際のサイトはアンカーが機能してないです。説明が無く申し訳ないですが、syntax errorはいくつかのツールなどで確認したのでないと思います。同じsectionで１つだけ機能してないのでバグかと思っています。根本的に原因解決がしたく、質問しましたが難しそうなのでJavascriptで無理やりですが解決しようと思います。ありがとうございました。

kuma_kuma_

2020/10/01 07:30

ちょと意味合いがちかって伝わっているようです。「私の環境で回答した状態でテストしました。質問者様も同じ内容でテストされてどうですか？」という意味です。

shimizu.so

2020/10/02 00:43

意味合いをはき違え返答して申し訳ございませんでした。同じような物で勿論検証は致しました。それらと実際に動かないものは同じものです。省略したものか、どこかの記事でみたのですがファイル容量に原因があるかもしれません。省略した内容などは公開できるものではなかったので質問が破綻しておりました。お手数をかけ申し訳ございません。

kuma_kuma_

2020/10/02 00:57 編集

いいえ、別の方法を選択するのも質問者様の自由ですので問題ありません。今回「どうですか？」とか書かせていた理由は<section>がはサイズを指定していないと幅や高さが0になります。そうするとアンカーが効いているが見た目が変わらな状態になっているのでは？と思い回答させていただいた次第です。スクロール関連はブラウザの影響をダイレクトに受けます。 (遅延読み込み対策などしないとうまく動かない事もある) 大変だとは思いますが頑張ってみて下さい。

行動規範の内容に同意します