下記のの部分が、マテリアルアイコンのBなのですが、ファイヤーフォックスとクローム、IEでネガティブマージンによる配置位置が違います。
ネガティブマージンはファイヤーフォックスだけ仕様が違うのでしょうか?
下記のサンプルを見てください。やはりブラウザで違います。
https://jsfiddle.net/80od313c/6/
・
<li> <a class="top-gnav__link-eighth" href="http://s/index.html"> <span class="top-gnav__top-ul--link-icon-blog"> <i class="material-icons"></i> </span><br /> <span class="top-gnav__top-ul--link-text">BLOG</span> </a> </li>
@media (min-width: 960px) .top-gnav__top-ul--link-text, .top-gnav__top-ul--text { font-size: 1.5rem; } ・ファイヤーフォックスは下記でぴったり .material-icons { display: inline-block; margin-bottom: -28.5%; text-align: center; } ・クローム、IEは下記でぴったり .material-icons { display: inline-block; margin-bottom: -19.5%; text-align: center; }
@media (min-width: 960px)
.top-gnav__top-ul--link-text, .top-gnav__top-ul--text {
font-size: 1.5rem;
}
・その後
下記のようにしたのですが、結局positionでもやはりクロームとファイヤーフォックスの配置される位置が違いだめでした。
.top-gnav__link-eighth { position: relative; } .gnav__icon_material_blog { position: absolute; display: inline-block; right: 0.7px; bottom: 12px; }
ポジションで指定するためクラス名を変えました。
・下記のように変更しました。
<ul> <li class="gnav__item-eighth"> <a class="top-gnav__link-eighth" href="l"> <span class="top-gnav__top-ul--link-icon-blog"> <i class="material-icons gnav__icon_material_blog"></i> </span><br /> <span class="top-gnav__top-ul--link-text">BLOG</span> </a> </li> </ul>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/02/15 07:40
退会済みユーザー
2016/02/15 07:49
退会済みユーザー
2016/02/15 14:20
退会済みユーザー
2016/02/15 15:23
退会済みユーザー
2016/02/16 02:29
退会済みユーザー
2016/02/16 10:37
退会済みユーザー
2016/02/16 10:49
退会済みユーザー
2016/02/17 03:52
退会済みユーザー
2016/02/17 04:04