IEとクロームはきくのに、ファイヤーフォックスだけpaddingが効きません。 display:flex;をつかうときかなくなると聞いたのですが、 対処方法はないのでしょうか？

Question

IEとクロームはきくのに、ファイヤーフォックスだけpaddingが効きません。
display:flex;をつかうときかなくなると聞いたのですが、
対処方法はないのでしょうか？

https://jsfiddle.net/u9dL5fxd/17/

数年間はまだフレキシブルボックスは使えないでしょうか？

ｃｓｓの部分はここです。
.main-copyright-wrap {
padding: 3% 0 6.5% 0;
}

Comments

[kei344]

どこの部分のpaddingかをお書きください。

Answer 1

CSS3の実装ってまだ微妙な部分があるので、
各ブラウザ向けの書き方を網羅しないといけない気がしますが、その点いかがでしょうか。
LIGさんの記事が分かりやすかったです。

CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG
http://liginc.co.jp/web/html-css/css/21024

実際の応用については、コリスさんの記事がわかりやすいです。

CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

自分とこのコンテンツではどうなのか、よく見比べてみるくらいのアドバイスしかできません。

Comments

[退会済みユーザー]

両方見たのですが、かくブラウザの違い書き方などは特に見つかりませんでした。

やはりうわさどおりまだ数年は実務では使えずdisplay:table;をつかうのが最新でしょうか？

[退会済みユーザー]

話が通じてないと思うのでズバリ書くと、「display: -moz-flex;」が足りない。-webkit-flexはWebkit系拡張、-ms-flexはマイクロソフト拡張、-moz-flexはMozilla拡張、-o-flexはOpera拡張、これら4つを網羅してみてください。

[退会済みユーザー]

ベンダープリフィックスの話ならそう書いてください。
postcssを使っているので勝手に付与されているはずです。

[退会済みユーザー]

例えばFirefoxでFirebugを組み合わせると、現在表示中のページでどういうスタイルシートが適用されているかリアルタイムにチェックできます。「勝手に付与」された結果、jsなどで展開され介入された後の結果も確認できるのですが、確認していますか？
ついでに確認、PostCSSといっしょにAutoPrefixerも適用済、ですね？

[退会済みユーザー]

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes を参照するに、display: flex;で期待する動作ができそうな記述がありますね、ますますわからん、、 的はずれな回答だったかもしれません。申し訳ありません。

[退会済みユーザー]

display: -webkit-box;
display: -ms-flexbox;
display: flex;

ファイヤーフォックスのインスペクタで見てみました。
上記のようになっており、下記二つが訂正線がついており、横に△のビックリマークがあり、優先されていません。
display: -webkit-box;
display: -ms-flexbox;

試しに 一番下の display: flex;のチェックボックスを外してみたところ、
paddingは効くようになり、横並びが解除されました。