【IE】1. フォントの上部が欠ける。2. 期待どおりに編集されない。(太字化 / content 追加)

前提・実現したいこと

IE での以下不具合 2 点を解消したい。

フォント上部が欠ける。
期待どおりに編集されない。(意図せぬ太字化や content 追加)

発生している問題

↑ の表のように、IE で
** **(a タグ内の) フォントの上部が欠け、
意図せぬ太字化と content 追加になっている。

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

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

該当のソースコード

html
1<hr>
2<footer>
3  <div class="con clearfix">
4    <nav class="clearfix">
5      <ul class="wide">
6        <li>
7          <span>
8            <i class="en">Category 1</i><span class="caption">大分類 1</span>
9          </span>
10          <div class="clearfix">
11            <ul class="half">
12              <li>中分類1
13                <ul>
14                  <li><a href="#">最下層 1</a></li>
15                </ul>
16              </li>
17            </ul>
18            <ul class="half">
19              <li><a href="#">中分類2</a>
20                <ul>
21                  <li><a href="#">最下層 2</a></li>
22                </ul>
23              </li>
24            </ul>
25            <ul class="half">
26              <li>中分類 3
27                <ul>
28                  <li><a href="#">最下層 3</a></li>
29                </ul>
30              </li>
31            </ul>
32          </div>
33        </li>
34      </ul>
35      <ul>
36        <li>
37          <span>
38            <a href="#"><i class="en">Category 2</i><span class="caption">大分類 2</span></a>
39          </span>
40          <ul>
41            <li><a href="#">中分類かつ最下層</a></li>
42          </ul>
43        </li>
44      </ul>
45    </nav>
46  </div>
47</footer>
48

CSS
1@charset "UTF-8";
2
3@import url('https://fonts.googleapis.com/css?family=Karla');
4
5* {
6  box-sizing:border-box;
7  /* tap */
8  -webkit-tap-highlight-color: rgba(0,0,0,0);
9  -webkit-box-shadow: none;
10  box-shadow: none;   
11  outline: none;
12}
13*:focus { outline: none; }
14
15html { overflow-y:scroll; }
16body {
17	width:100%; margin:0; padding:0;
18	font-size:15px; line-height:1.7; letter-spacing:0.05em;
19	color:#000;
20	font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
21	background:#fff;
22}
23
24ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, h7, form, p { margin:0; padding:0; }
25img { border:0; }
26li { list-style-type:none; }
27
28a { overflow:hidden; -webkit-transition:.2s linear; -moz-transition:.2s linear; -o-transition:.2s linear; transition:.2s linear; }
29a:link		{ color:#000; text-decoration:none; }
30a:visited	{ color:#000; }
31a:hover		{ color:#cc141c; }
32a:active	{ color:#cc141c; }
33a img {
34	-webkit-transition:.2s linear;
35	-moz-transition:.2s linear;
36	-o-transition:.2s linear;
37	transition:.2s linear; }
38a.fade:hover img { opacity:0.7; }
39
40a.underline { text-decoration:underline; color:#cc141c; }
41a.underline:hover { color:#cc141c; }
42
43img { max-width:100%; height:auto; vertical-align:top; }
44
45/* clearfix */
46.clearfix:after {  
47	visibility: hidden;  
48	display: block;  
49	font-size: 0;  
50	content: " ";  
51	clear: both;  
52	height: 0;  
53}  
54* html .clearfix { zoom: 1; } /* IE6 */  
55*:first-child+html .clearfix { zoom: 1; } /* IE7 */  
56
57.txt_c { text-align:center; }
58.txt_l { text-align:left; }
59.txt_r { text-align:right; }
60
61.float_l { float:left; }
62.float_r { float:right; }
63.clear { clear:both; }
64.hidden { visibility:hidden; }
65
66.serif { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", serif; }
67.en    { font-family: Karla, Century Gothic, Futura,sans-serif; }
68.bold  { font-weight:bold; }
69.big   { font-size:120%; }
70.small { font-size:88%; }
71.red   { color:#df003a!important; }
72.white { color:#fff!important; }
73.black { color:#000!important; }
74
75body.fixed { position:fixed; width:100%; height:100%; }
76.con { position:relative; margin:auto; }
77
78/* common */
79p { margin-bottom:20px; }
80p:last-child { margin-bottom:0; }
81.con { position:relative; text-align:left; }
82
83.all { text-align:right; margin:-20px 0 50px; font-size:14px; letter-spacing:0.075em; }
84.all a:after { content:""; display:inline-block; width:20px; height:6px; margin-left:10px; background:url("../img/arrow_b.png") 0 0 no-repeat; }
85
86/* footer */
87footer { padding-bottom:40px; text-align:center; position:relative; }
88
89footer nav { padding-top:70px; }
90footer nav a { color:#000; font-size:14px; }
91footer nav li ul a { font-size:14px; }
92footer nav li ul li { position:relative; padding-left:20px; line-height:1; padding:0; }
93footer nav li ul li + li { margin-top:15px; }
94footer nav li ul li.title { padding:0; }
95/* title class による文字太さの設定 */ 
96ul, li.title {font-weight:Bold;} /* 太字化 */
97li.title ul, span {font-weight:normal;} /* title class の子要素を標準化 */
98li a,li.title a {font-weight:inherit;} /* li の子要素 a に引き継ぐ */
99
100ul, li.gray {color:gray}
101li a,li.gray a {color:inherit; display: block;}
102
103footer nav > ul > li > span { font-size:11px; }
104footer nav > ul > li > span i { display:block; font-style:normal; font-size:18px; font-weight:bold; line-height:1; margin-bottom:5px; }
105.caption { font-size:11px; }
106
107@media (min-width: 769px) {
108
109  footer nav li ul { margin-top:40px; }
110  footer nav li ul.half { width:33.333%; float:left; }
111  footer nav > ul { width:25%; float:left; margin-bottom:50px; }
112  footer nav > ul.wide { width:75%; }
113  footer nav > ul > li > ul,
114  footer nav > ul > li > .clearfix { display:block; }
115  footer nav > ul > li > span { position:relative; display:block; padding-bottom:15px; }
116  footer nav > ul > li > span:after { content:""; display:block; width:75%; height:1px; background:#cc141c; position:absolute; bottom:0; left:0; }
117 /* title class でない li に続く a の前にマーカー文字を追加する */
118  footer nav li:not(.title) > a:before { content:"－ ";}}
119

JavaScript
1    // 子リストを持つ li に「title」という class を付加する
2    window.addEventListener('DOMContentLoaded', ()=>{
3        document.querySelectorAll('li').forEach(x=>{
4            var flg=(x.querySelectorAll('ul').length > 0);
5            x.classList.toggle('title',flg);
6        });
7    });
8    // a 要素を持たない li に「gray」という class を付加する
9    window.addEventListener('DOMContentLoaded', ()=>{
10        document.querySelectorAll('li').forEach(x=>{
11            var flg=(x.querySelectorAll('a').length == 0);
12            x.classList.toggle('gray',flg);
13        });
14    });

試したこと

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

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

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

回答1件

ベストアンサー

下記記述が不要であれば、欠けるという現象については解決できるかと思います。
https://studio-bouzu.net/internetexplorer_baseline/

css
1a {
2  overflow:hidden;
3}

根本的な原因については別ですが…
https://studio-bouzu.net/internetexplorer_baseline/

IEのみフォントを変えるというのも、技術的には可能です。
デザイン的に問題なければ、似たフォントを使用するというのもありかなと思います。

css
1@media all and (-ms-high-contrast: none) {
2  body {
3    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
4  } 
5}

https://studio-bouzu.net/internetexplorer_baseline/

投稿2020/04/22 06:18

編集2020/04/22 12:52

kszk311

総合スコア3404

BetterEveryday

2020/04/22 07:35

kszk311 さま、コードを回答いただきましてどうもありがとうございます。教示いただいた overflow 指定削除により、フォント欠けを解消できました。また、根本的な原因「IE のフォント位置が上にズレる」についてもお知らせいただきましてありがとうございます。もしお時間あるタイミングがありましたら、1 点確認させてください。「IE での表示のみ、フォントを変える」という対応も可能なのでしょうか? (自分で試したところでは overflow 削除なしに欠けは解消できませんでした。)

BetterEveryday

2020/04/22 10:20

IE ではフォント欠けのみでなく、 JavaScript で付与した .title をトリガにした編集も期待どおりに動いていないことも問題点に追加しました。もし対策案を思いつく方がいましたら、回答をお願いいたします。

kszk311

2020/04/22 12:55 編集

＞「IE での表示のみ、フォントを変える」という対応も可能なのでしょうか? 回答しましたので、確認お願いします。＞JavaScript で付与した .title をトリガにした編集も期待どおりに動いていないことも問題点に追加しました。こちらについては、また別問題では？と思うので、別課題で質問するのが良いかと思います。また、「期待通りに表示されない」という問題は、意図していない箇所の影響の可能性もあるため、コード全文記載することをお勧めします。

BetterEveryday

2020/04/22 13:23

kszk311 さま、再回答どうもありがとうございます。 (局所的に a タグなどの) フォントを変更してみたところ、欠けが若干小さくなりました。全体が表示される overflow 削除での対応にしようと思います。追加した「期待通りに表示されない」問題の扱いについても、advice いただきましてどうもありがとうございます。別課題として登録しようと思います。(コードについては載せている内容がすべてになります。) IE の対策は自分では見つけられませんでしたので、とても助かりました。私の問題解決のためにお時間とお気持ちをいただきましてどうもありがとうございました。

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