IE 11 で期待通りに表示されない (太字化 / content 追加)

Question

前提・実現したいこと

JavaScript で付与した .title をトリガにする編集において、
IE 11 でも他のブラウザと同じく期待通りに表示させたい。

発生している問題

IE 11 では以下 2 種類が想定と異なる表示になる。
|ケース|編集条件|期待値|結果: × (期待外れ)|
|:--|:--:|--:|
|1-1|.title が付与された li (子リスト有り li)|content が挿入されない|content が挿入される|
|2-1|.title が付与されていない li (子リスト無し li)|font-weight: 標準|font-weight: 太字になる|

IE に限り、JavaScript も動かないのか? を検証するには、どうすればよいのでしょうか?

あるいは CSS の a 要素やセレクタ指定、JavaScript の記述に誤り/問題があり、解消できるものなのでしょうか?

該当のソースコード

<hr>
<footer>
  <div class="con clearfix">
    <nav class="clearfix">
      <ul class="wide">
        <li>
          <span>
            <i class="en">ListLevel1st</i><span class="caption"><span style="background-color:aqua;">リンク無し</span>も○ [太字 かつ content 追加なし]</span>
          </span>
          <div class="clearfix">
            <ul class="half">
              <li>ListLevel2nd:<br><span style="background-color:lightgreen;">子リスト有り</span>の<span style="background-color:aqua;">リンク無し</span>は ○ [content 追加なし]
                <ul>
                  <li><a href="#">最下層:<br><u><span style="background-color:yellow;">子リスト無し</span>の<span style="background-color:red;">リンク有り</span>は ×【太字になる】</u></a></li>
                </ul>
              </li>
            </ul>
            <ul class="half">
              <li><a href="#">ListLevel2nd:<br><u><span style="background-color:lightgreen;">子リスト有り</span>の<span style="background-color:red;">リンク有り</span>は ×【content 追加される】</u></a>
                <ul>
                  <li><a href="#">最下層:<br><u><span style="background-color:yellow;">子リスト無し</span>の<span style="background-color:red;">リンク有り</span>は ×【太字になる】</u></a></li>
                </ul>
              </li>
            </ul>
            <ul class="half">
              <li>ListLevel2nd:<br><span style="background-color:lightgreen;">子リスト有り</span>の<span style="background-color:aqua;">リンク無し</span>は ○ [content 追加なし]
                <ul>
                  <li><a href="#">最下層:<br><u><span style="background-color:yellow;">子リスト無し</span>の<span style="background-color:red;">リンク有り</span>は ×【太字になる】</u></a></li>
                </ul>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <ul>
        <li>
          <span>
            <a href="#"><i class="en">ListLevel1st</i><span class="caption"><span style="background-color:red;">リンク有り</span>も○ [太字 かつ content 追加なし]</span></a>
          </span>
          <ul>
            <li><a href="#"><u>最下層:<br><span style="background-color:yellow;"> 子リスト無し</span>の<span style="background-color:red;">リンク有り</span>は ×【太字になる】</u></a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</footer>

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Karla');

* {
  box-sizing:border-box;
  /* tap */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-box-shadow: none;
  box-shadow: none;   
  outline: none;
}
*:focus { outline: none; }

html { overflow-y:scroll; }
body {
	width:100%; margin:0; padding:0;
	font-size:15px; line-height:1.7; letter-spacing:0.05em;
	color:#000;
	font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
	background:#fff;
}

ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, h7, form, p { margin:0; padding:0; }
img { border:0; }
li { list-style-type:none; }

a { -webkit-transition:.2s linear; -moz-transition:.2s linear; -o-transition:.2s linear; transition:.2s linear; }
a:link		{ color:#000; text-decoration:none; }
a:visited	{ color:#000; }
a:hover		{ color:#cc141c; }
a:active	{ color:#cc141c; }
a img {
	-webkit-transition:.2s linear;
	-moz-transition:.2s linear;
	-o-transition:.2s linear;
	transition:.2s linear; }
a.fade:hover img { opacity:0.7; }

a.underline { text-decoration:underline; color:#cc141c; }
a.underline:hover { color:#cc141c; }

img { max-width:100%; height:auto; vertical-align:top; }

/* clearfix */
.clearfix:after {  
	visibility: hidden;  
	display: block;  
	font-size: 0;  
	content: " ";  
	clear: both;  
	height: 0;  
}  
* html .clearfix { zoom: 1; } /* IE6 */  
*:first-child+html .clearfix { zoom: 1; } /* IE7 */  

.txt_c { text-align:center; }
.txt_l { text-align:left; }
.txt_r { text-align:right; }

.float_l { float:left; }
.float_r { float:right; }
.clear { clear:both; }
.hidden { visibility:hidden; }

.serif { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", serif; }
.en    { font-family: Karla, Century Gothic, Futura,sans-serif; }
.bold  { font-weight:bold; }
.big   { font-size:120%; }
.small { font-size:88%; }
.red   { color:#df003a!important; }
.white { color:#fff!important; }
.black { color:#000!important; }

body.fixed { position:fixed; width:100%; height:100%; }
.con { position:relative; margin:auto; }

/* common */
p { margin-bottom:20px; }
p:last-child { margin-bottom:0; }
.con { position:relative; text-align:left; }

.all { text-align:right; margin:-20px 0 50px; font-size:14px; letter-spacing:0.075em; }
.all a:after { content:""; display:inline-block; width:20px; height:6px; margin-left:10px; background:url("../img/arrow_b.png") 0 0 no-repeat; }

/* footer */
footer { padding-bottom:40px; text-align:center; position:relative; }

footer nav { padding-top:70px; }
footer nav a { color:#000; font-size:14px; }
footer nav li ul a { font-size:14px; }
footer nav li ul li { position:relative; padding-left:20px; line-height:1; padding:0; }
footer nav li ul li + li { margin-top:15px; }
footer nav li ul li.title { padding:0; } 
/* title class による文字太さの設定 */ 
ul, li.title {font-weight:Bold;} /* 太字化 */
li.title ul, span {font-weight:normal;} /* title class の子要素を標準化 */
li a,li.title a {font-weight:inherit;} /* li の子要素 a に引き継ぐ */

ul, li.gray {color:gray}
li a,li.gray a {color:inherit; display: block;}

footer nav > ul > li > span i { display:block; font-style:normal; font-size:18px; font-weight:bold; line-height:1; margin-bottom:5px; }
.caption { font-size:11px; }

@media (min-width: 769px) {

  footer nav li ul { margin-top:40px; }
  footer nav li ul.half { width:33.333%; float:left; }
  footer nav > ul { width:25%; float:left; margin-bottom:50px; }
  footer nav > ul.wide { width:75%; }
  footer nav > ul > li > ul,
  footer nav > ul > li > .clearfix { display:block; }
  footer nav > ul > li > span { position:relative; display:block; padding-bottom:15px; }
  footer nav > ul > li > span:after { content:""; display:block; width:75%; height:1px; background:#cc141c; position:absolute; bottom:0; left:0; }
 /* title class でない li に続く a の前にマーカー文字を追加する */
  footer nav li:not(.title) > a:before { content:"－ ";}
}

    // 子リストを持つ li 要素に「title」という class を付加する
    window.addEventListener('DOMContentLoaded', ()=>{
        document.querySelectorAll('li').forEach(x=>{
            var flg=(x.querySelectorAll('ul').length > 0);
            x.classList.toggle('title',flg);
        });
    });
    // a 要素を持たない li に「gray」という class を付加する
    window.addEventListener('DOMContentLoaded', ()=>{
        document.querySelectorAll('li').forEach(x=>{
            var flg=(x.querySelectorAll('a').length == 0);
            x.classList.toggle('gray',flg);
        });
    });

試したこと

■1. 他のブラウザでは期待通りに表示される。

• Microsoft Edge
• Google Chrome

■2. IE でも以下は期待通りに表示される。
|ケース|編集条件|期待値|結果: 〇 期待通り|
|:--|:--:|--:|
|1-2|.title が付与された li (子リストを有り li)|font-weight: 太字|font-weight: 太字になる|
|2-2|.title が付与されていない li (子リスト無し li)|content が挿入される|content が挿入される|

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

ターゲットブラウザ: Internet Explorer 11

■関連不具合
今回期待値と異なる li 要素については「フォント欠け(位置上ズレ)」の問題も発生しており、overflow:visible で対応しています。
リンク内容

Answer 1

1-2: content が挿入されてしまう件
.titleを付与したli要素直下のaタグのbefore疑似要素の「content」が挿入されてしまう、
と理解しました。

まず最終手段として「表示したくない」のであれば以下のようにdisplay: none;を指定する方法もあると思います。

/* CSSセレクタは、設定お願いします。 「.xxxx」はダミーです */
.xxxx .xxxx .title a::before { display: none; }

あとは解決するか微妙ですが、
a:beforeは
a::beforeなど、「::」を使うのがいまは一般的なのでそちらを使ったほうがいいかと思います。

---

2-1: 太字になってしまう件

/* CSSセレクタは、設定お願いします。 「.xxxx」はダミーです */
.xxxx .xxxx li a {
  font-weight: normal;
}

もしくは↓でもいけるかもしれません。

/* CSSセレクタは、設定お願いします。 「.xxxx」はダミーです */
.xxxx .xxxx li a {
  font-weight: inherit; /* 親要素の値を踏襲 */
}

---

Bold;でなくboldにするといいかもしれません。
(IEは、一般的でない書き方をすると動かなくなることが多いので)

/* ul, li.title {font-weight:Bold;} */ /* 太字化 */
ul, li.title {font-weight:bold;} /* 太字化 */

Comments

[BetterEveryday]

new1ro さま、
検討いただきましてありがとうございます。

1. content が挿入されてしまう件
たしかに display:none; を指定する案は良さそうですね。
記述挿入位置は以下の content 追加後 (CSS 最終行) になると思いますが、

/* title class でない li に続く a の前にマーカー文字を追加する */
footer nav li:not(.title) > a:before { content:"－ ";}

有効に機能するセレクタを見つけられませんでした。

2. 太字になる件
いただいた案. li a に normal または inherit を指定する
.title の li a は太字にしたいため、以下の記述にしています。
ul, li.title {font-weight:Bold;} /* 太字化 */
li.title ul, span {font-weight:normal;} /* title class の子要素を標準化 */
li a,li.title a {font-weight:inherit;} /* li の子要素 a に引き継ぐ */

データ構造から .title を作成し、
その .title の有無で同じ階層でもスタイルを制御しようとしています。
もし有効に機能するセレクタ案がありましたら、お知らせいただけませんでしょうか?

また、:: と bold の記述スタイルについても advice ありがとうございます。
IE 実行結果は変化しませんでしたが、今後留意していこうと思います。

どうぞよろしくお願いいたします。