質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4327閲覧

ネガティブマージンはファイヤーフォックスだけ仕様が違うのでしょうか?

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

3クリップ

投稿2016/02/14 14:31

編集2016/02/17 03:51

下記のの部分が、マテリアルアイコンの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">&#xE238;</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">&#xE238;</i> </span><br /> <span class="top-gnav__top-ul--link-text">BLOG</span> </a> </li> </ul>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ネガティブマージンを使用するセレクタに position: relative;を指定してみてください(;´∀`)
FireFoxでのネガティブマージンは確かに解釈が違うようです。

投稿2016/02/15 07:34

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/02/15 07:40

やはり計算方法が違うのでずれるのですね。 下記のように下のですが、変化がありません。親要素にabsoluteも必要でしょうか? .material-icons { position: relative; display: inline-block; margin-bottom: -19.5%; /* アイコンとアイコンテキストの隙間 */ text-align: center; }
退会済みユーザー

退会済みユーザー

2016/02/15 07:49

うむむ... それならば、 .material-icons { position: relative; display: inline-block; bottom: -19.5%; /* アイコンとアイコンテキストの隙間 */ text-align: center; } として margin-bottomをbottomで位置調整するほうが確実かもしれません。
退会済みユーザー

退会済みユーザー

2016/02/15 14:20

ありがとうございます。 残念ながら上ででもだめでした。 top-gnav__link-eighthにposition: relative;をつけて、子要素.material-iconsにposition:absolute;をつけて相対指定で配置するしかないでしょうか?
退会済みユーザー

退会済みユーザー

2016/02/15 15:23

あらら!そうでしたか>< 対象要素の周りの環境にも寄るのですね。 absolute指定でも構わないデザインであればそれで解決したほうが良いかもしれませんね。
退会済みユーザー

退会済みユーザー

2016/02/16 02:29

下記のようにしたのですが、結局positionでのネガティブを使ったせいか、やはりクロームとファイヤーフォックスの配置される位置が違いだめでした。 .top-gnav__link-eighth { position: relative; } .gnav__icon_material_blog { position: absolute; display: inline-block; right: 0px; bottom: 0px; }
退会済みユーザー

退会済みユーザー

2016/02/16 10:37

すいません。ポジションで指定するためクラス名を変えたことをお伝えしていなかったですね。 ・下記のように変更しました。 <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">&#xE238;</i> </span><br /> <span class="top-gnav__top-ul--link-text">BLOG</span> </a> </li> </ul>
退会済みユーザー

退会済みユーザー

2016/02/16 10:49

下記のようにネガティブでなくしてもやはり位置がずれます。マテリアルアイコンの癖でしょうか? .top-gnav__link-eighth { position: relative; } .gnav__icon_material_blog { position: absolute; display: inline-block; right: 0.7px; bottom: 12px; }
退会済みユーザー

退会済みユーザー

2016/02/17 04:04

確認しました。 .top-gnav__link-eighth{ position: relative; display: inline-block; font-size:0; } .top-gnav__link-eighth span{ font-size: 14px; } .gnav__icon_material_blog { position: absolute; display: inline-block; right: 0.7px; bottom: 12px; } このように、親要素である.top-gnav__link-eighthのdisplayをinline-blockにして、font-sizeを0にします。 そのあと、中身の要素に対してfont-sizeを指定してあげます。 display: inline-block;を使用している場合、親要素のフォントサイズをリセットし、子要素のフォントサイズを指定してあげるとずれが無くなります。 試してみてください(;´∀`)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問