質問編集履歴
2
下記のサンプルを見てください。やはりブラウザで違います。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
下記のの部分が、マテリアルアイコンのBなのですが、ファイヤーフォックスとクローム、IEでネガティブマージンによる配置位置が違います。
|
|
2
2
|
ネガティブマージンはファイヤーフォックスだけ仕様が違うのでしょうか？
|
|
3
3
|
|
|
4
|
+
下記のサンプルを見てください。やはりブラウザで違います。
|
|
5
|
+
https://jsfiddle.net/80od313c/6/
|
|
6
|
+
|
|
4
7
|
・
|
|
5
8
|
```ここに言語を入力
|
|
6
9
|
<li>
|
1
下記のようにしたのですが、結局positionでもやはりクロームとファイヤーフォックスの配置される位置が違いだめでした。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -41,4 +41,37 @@
|
|
|
41
41
|
@media (min-width: 960px)
|
|
42
42
|
.top-gnav__top-ul--link-text, .top-gnav__top-ul--text {
|
|
43
43
|
font-size: 1.5rem;
|
|
44
|
-
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
・その後
|
|
48
|
+
下記のようにしたのですが、結局positionでもやはりクロームとファイヤーフォックスの配置される位置が違いだめでした。
|
|
49
|
+
|
|
50
|
+
```ここに言語を入力
|
|
51
|
+
.top-gnav__link-eighth {
|
|
52
|
+
position: relative;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.gnav__icon_material_blog {
|
|
56
|
+
position: absolute;
|
|
57
|
+
display: inline-block;
|
|
58
|
+
right: 0.7px;
|
|
59
|
+
bottom: 12px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
```
|
|
63
|
+
ポジションで指定するためクラス名を変えました。
|
|
64
|
+
|
|
65
|
+
・下記のように変更しました。
|
|
66
|
+
```ここに言語を入力
|
|
67
|
+
<ul>
|
|
68
|
+
<li class="gnav__item-eighth">
|
|
69
|
+
<a class="top-gnav__link-eighth" href="l">
|
|
70
|
+
<span class="top-gnav__top-ul--link-icon-blog">
|
|
71
|
+
<i class="material-icons gnav__icon_material_blog"></i>
|
|
72
|
+
</span><br />
|
|
73
|
+
<span class="top-gnav__top-ul--link-text">BLOG</span>
|
|
74
|
+
</a>
|
|
75
|
+
</li>
|
|
76
|
+
</ul>
|
|
77
|
+
```
|