teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問【IE】1. フォントの上部が欠ける。2. 期待どおりに編集されない。(太字化 / content 追加)

編集履歴

質問編集履歴

14

削除: いつのまにか記述されていた不要な記述

2020/04/22 10:35

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  IE での以下不具合 2 点を解消したい。
4
4
 
5
- 1. フォント上部が欠ける。font-weight: normal 標準
5
+ 1. フォント上部が欠ける。
6
6
 
7
7
  2. 期待どおりに編集されない。(意図せぬ太字化や content 追加)
8
8
 

13

修正: 期待値欠損

2020/04/22 10:35

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  |適用条件(要素)|ブラウザ|a タグ|title class でない li|**title class の li**|title class の li|**title class ではない**|
16
16
 
17
- |期待値|ブラウザ|**フォント上部: ○欠けない**|マーカー文字: content を追加する|**マーカー文字:content を追加しない**|font-weight: bold 太字|****|
17
+ |期待値|ブラウザ|**フォント上部: ○欠けない**|マーカー文字: content を追加する|**マーカー文字:content を追加しない**|font-weight: bold 太字|font-weight: normal **標準**|
18
18
 
19
19
  |結果|Internet Explorer 11|**× (欠ける)**|○ (追加する)|**× (追加する)**|○ (太字)|**× (太字)**|
20
20
 

12

追加: 強調太字化 (期待値表)

2020/04/22 10:15

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  IE での以下不具合 2 点を解消したい。
4
4
 
5
- 1. フォント上部が欠ける。
5
+ 1. フォント上部が欠ける。font-weight: normal 標準
6
6
 
7
7
  2. 期待どおりに編集されない。(意図せぬ太字化や content 追加)
8
8
 
@@ -12,11 +12,11 @@
12
12
 
13
13
  |:--|:--:|
14
14
 
15
- |適用条件(要素)|ブラウザ|a タグ|title class でない li|**title class の li**|title class の li|title class ではない|
15
+ |適用条件(要素)|ブラウザ|a タグ|title class でない li|**title class の li**|title class の li|**title class ではない**|
16
-
16
+
17
- |期待値|ブラウザ|フォント上部: ○欠けない|マーカー文字: content を追加する|**マーカー文字:content を追加しない**|font-weight: bold 太字|font-weight: normal 標準|
17
+ |期待値|ブラウザ|**フォント上部: ○欠けない**|マーカー文字: content を追加する|**マーカー文字:content を追加しない**|font-weight: bold 太字|****|
18
-
18
+
19
- |結果|Internet Explorer 11|× (欠ける)|○ (追加する)|**× (追加する)**|○ (太字)|**× (太字)**|
19
+ |結果|Internet Explorer 11|**× (欠ける)**|○ (追加する)|**× (追加する)**|○ (太字)|**× (太字)**|
20
20
 
21
21
  |結果|Google Chrome|○ (欠けない)|○ (追加する)|○ (追加しない)|○ (太字)|○ (標準)|
22
22
 

11

追加: 質問/疑問点

2020/04/22 10:13

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -38,7 +38,15 @@
38
38
 
39
39
  ```
40
40
 
41
+ IE に限り、JavaScript も動かないのか? を検証するには
42
+
43
+ どうすればよいのでしょうか?
44
+
45
+
46
+
41
- a 要素の CSS や javaScript の記述に問題があり、解消できるものなのでしょうか?
47
+ それとも CSS の a 要素やセレクタ指定、JavaScript の記述に誤り/問題があり、解消できるものなのでしょうか?
48
+
49
+
42
50
 
43
51
  ```
44
52
 

10

追加: css コメント (マーカー文字追加処理)

2020/04/22 10:09

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -380,9 +380,9 @@
380
380
 
381
381
  footer nav > ul > li > span:after { content:""; display:block; width:75%; height:1px; background:#cc141c; position:absolute; bottom:0; left:0; }
382
382
 
383
+ /* title class でない li に続く a の前にマーカー文字を追加する */
384
+
383
- footer nav li:not(.title) > a:before { content:"－ ";}
385
+ footer nav li:not(.title) > a:before { content:"－ ";}}
384
-
385
- }
386
386
 
387
387
 
388
388
 

9

追加: コメント (css)

2020/04/22 09:58

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -334,21 +334,23 @@
334
334
 
335
335
  footer nav li ul li + li { margin-top:15px; }
336
336
 
337
- footer nav li ul li.title { padding:0; }
337
+ footer nav li ul li.title { padding:0; }
338
+
338
-
339
+ /* title class による文字太さの設定 */
340
+
339
- **ul, li.title {font-weight:Bold;}
341
+ ul, li.title {font-weight:Bold;} /* 太字化 */
340
-
342
+
341
- li.title ul, span {font-weight:normal;}
343
+ li.title ul, span {font-weight:normal;} /* title class の子要素を標準化 */
342
-
344
+
343
- li a,li.title a {font-weight:inherit;}
345
+ li a,li.title a {font-weight:inherit;} /* li の子要素 a に引き継ぐ */
344
-
345
- **
346
+
346
-
347
+
348
+
347
- **ul, li.gray {color:gray}
349
+ ul, li.gray {color:gray}
348
350
 
349
351
  li a,li.gray a {color:inherit; display: block;}
350
352
 
351
- **
353
+
352
354
 
353
355
  footer nav > ul > li > span { font-size:11px; }
354
356
 

8

変更: JavaScript コメント明確化

2020/04/22 09:46

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -388,7 +388,7 @@
388
388
 
389
389
  ```JavaScript
390
390
 
391
- // 子要素を持つ li に「title」という class を付加する
391
+ // 子リストを持つ li に「title」という class を付加する
392
392
 
393
393
  window.addEventListener('DOMContentLoaded', ()=>{
394
394
 

7

追加: 問題点表 (期待値と結果)

2020/04/22 09:38

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
@@ -1 +1 @@
1
- 【IE】1. フォントの上部が欠ける。2. 編集できない。(太字化 / content 追加)
1
+ 【IE】1. フォントの上部が欠ける。2. 期待どおりに編集されない。(太字化 / content 追加)
test CHANGED
@@ -2,18 +2,38 @@
2
2
 
3
3
  IE での以下不具合 2 点を解消したい。
4
4
 
5
- 1. フォント欠け
5
+ 1. フォント上部が欠ける。
6
-
6
+
7
- 2. 編集できない。(意図せぬ太字化や content 追加)
7
+ 2. 期待どおりに編集されない。(意図せぬ太字化や content 追加)
8
+
9
+
10
+
11
+ |適用条件(意味)|ブラウザ|a タグ|子要素 (ul) を持たない li|**子要素 (ul) を持つ li**|子要素 (ul) を持つ li|**子要素 (ul) を持たない li**|
12
+
13
+ |:--|:--:|
14
+
15
+ |適用条件(要素)|ブラウザ|a タグ|title class でない li|**title class の li**|title class の li|title class ではない|
16
+
17
+ |期待値|ブラウザ|フォント上部: ○欠けない|マーカー文字: content を追加する|**マーカー文字:content を追加しない**|font-weight: bold 太字|font-weight: normal 標準|
18
+
19
+ |結果|Internet Explorer 11|× (欠ける)|○ (追加する)|**× (追加する)**|○ (太字)|**× (太字)**|
20
+
21
+ |結果|Google Chrome|○ (欠けない)|○ (追加する)|○ (追加しない)|○ (太字)|○ (標準)|
22
+
23
+ |結果|Microsoft Edge|○ (欠けない)|○ (追加する)|○ (追加しない)|○ (太字)|○ (標準)|
24
+
25
+
26
+
27
+ ### 発生している問題
28
+
29
+ ↑ の表のように、IE で
30
+
31
+ ** **(a タグ内の) フォントの上部が欠け、
32
+
33
+ 意図せぬ太字化と content 追加になっている。
8
34
 
9
35
  ![イメージ説明](079128660c8d273f4b3b7c8cd4e9d43a.gif)
10
36
 
11
- ### 発生している問題
12
-
13
- IE で
14
-
15
- ** **(a タグ内の) **フォント**の上部が欠けてしまう。
16
-
17
37
 
18
38
 
19
39
  ```
@@ -400,18 +420,6 @@
400
420
 
401
421
  ### 試したこと
402
422
 
403
- IE 以外のブラウザで欠けは発生しない。
404
-
405
- |ブラウザ|結果|
406
-
407
- |:--|:--:|
408
-
409
- |Internet Explorer 11|× (欠ける)|
410
-
411
- |Google Chrome|○ (欠けない)|
412
-
413
- |Microsoft Edge|○ (欠けない)|
414
-
415
423
 
416
424
 
417
425
  ### 補足情報（FW/ツールのバージョンなど）

6

追加: JavaScript

2020/04/22 09:34

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -316,19 +316,19 @@
316
316
 
317
317
  footer nav li ul li.title { padding:0; }
318
318
 
319
- ul, li.title {font-weight:Bold;}
319
+ **ul, li.title {font-weight:Bold;}
320
320
 
321
321
  li.title ul, span {font-weight:normal;}
322
322
 
323
323
  li a,li.title a {font-weight:inherit;}
324
324
 
325
-
325
+ **
326
-
326
+
327
- ul, li.gray {color:gray}
327
+ **ul, li.gray {color:gray}
328
328
 
329
329
  li a,li.gray a {color:inherit; display: block;}
330
330
 
331
-
331
+ **
332
332
 
333
333
  footer nav > ul > li > span { font-size:11px; }
334
334
 
@@ -368,6 +368,8 @@
368
368
 
369
369
  ```JavaScript
370
370
 
371
+ // 子要素を持つ li に「title」という class を付加する
372
+
371
373
  window.addEventListener('DOMContentLoaded', ()=>{
372
374
 
373
375
  document.querySelectorAll('li').forEach(x=>{
@@ -380,6 +382,8 @@
380
382
 
381
383
  });
382
384
 
385
+ // a 要素を持たない li に「gray」という class を付加する
386
+
383
387
  window.addEventListener('DOMContentLoaded', ()=>{
384
388
 
385
389
  document.querySelectorAll('li').forEach(x=>{

5

追加: 問題点

2020/04/22 08:40

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
@@ -1 +1 @@
1
- IE でフォントの上部が欠ける。回避策は?
1
+ 【IE】1. フォントの上部が欠ける。2. 編集できない。(太字化 / content 追加)
test CHANGED
@@ -1,18 +1,24 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- IE でのフォント欠けを解消したい。
3
+ IE での以下不具合 2 点を解消したい。
4
+
5
+ 1. フォント欠け
6
+
7
+ 2. 編集できない。(意図せぬ太字化や content 追加)
4
8
 
5
9
  ![イメージ説明](079128660c8d273f4b3b7c8cd4e9d43a.gif)
6
10
 
7
11
  ### 発生している問題
8
12
 
13
+ IE で
14
+
9
- IE で ** **(a タグ内の) **フォント**の上部が欠けてしまう。
15
+ ** **(a タグ内の) **フォント**の上部が欠けてしまう。
10
16
 
11
17
 
12
18
 
13
19
  ```
14
20
 
15
- a 要素の CSS 記述に問題があり、解消できるものなのでしょうか?
21
+ a 要素の CSS や javaScript の記述に問題があり、解消できるものなのでしょうか?
16
22
 
17
23
  ```
18
24
 

4

追加: 真因との関連付け

2020/04/22 08:36

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
@@ -1 +1 @@
1
- a タグ内のフォントの上部が欠ける。【IE 11のみ】CSS 記述で解消可能?
1
+ IE でフォントの上部が欠ける。回避策は?
test CHANGED
@@ -1,12 +1,12 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- IE 11 でのフォント欠けを解消したい。
3
+ IE でのフォント欠けを解消したい。
4
4
 
5
5
  ![イメージ説明](079128660c8d273f4b3b7c8cd4e9d43a.gif)
6
6
 
7
7
  ### 発生している問題
8
8
 
9
- IE 11 で **a タグ内のフォント**の上部が欠けてしまう。
9
+ IE で ** **(a タグ内の) **フォント**の上部が欠けてしまう。
10
10
 
11
11
 
12
12
 

3

変更: タイトル

2020/04/22 07:55

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
@@ -1 +1 @@
1
- a タグ内のフォントの上部が欠ける。【IE 11のみ】CSS 記述の問題?
1
+ a タグ内のフォントの上部が欠ける。【IE 11のみ】CSS 記述で解消可能?
test CHANGED
File without changes

2

追加: 初心者マーク

2020/04/22 05:53

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
@@ -1 +1 @@
1
- IE 11 でフォントが欠ける。CSS 記述の問題?
1
+ a タグ内のフォントの上部が欠ける。【IE 11のみ】CSS 記述の問題?
test CHANGED
File without changes

1

追加: 画面イメージ

2020/04/22 04:56

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  IE 11 でのフォント欠けを解消したい。
4
4
 
5
-
5
+ ![イメージ説明](079128660c8d273f4b3b7c8cd4e9d43a.gif)
6
6
 
7
7
  ### 発生している問題
8
8