CSSのハックについて

前提・実現したいこと

cssを用いて、各プラウザ事に設定していきたいのですが、firefoxだけ上手くいきません。
firefoxにchromeのハックが適用されてしまいます。
デベロッパーツールでchromeのハックを適応を消すとfirefoxのcssがきちんと適応されます。
自分で調べてみて、chromeのハックはfirefoxには適応されない記述にしてあるはずなのですが、上手くいきません。
知識をお借り出来れば幸いです。

CSS
1/*firefox*/
2
3@-moz-document url-prefix() {
4.sample{
5	padding:0px;
6	margin-left:110px;
7	margin-top:-857px;
8	line-height:1.46em;
9	}
10}
11
12/*chrome*/
13
14@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
15.sample{
16	padding:0px;
17	margin-left:110px;
18	margin-top:-858px;
19	line-height:1.5em;
20}
21
22}
23
24
25

試したこと

元々は@media screen and (-webkit-min-device-pixel-ratio: 0) でやっていたのですがこれだと、firefoxも適応されるとの事だったので上記に変えましたが、上手くいきませんでした。
cssの記述順も疑ったのですが、firefoxの方が先に記述していました。

maisumakun

2019/02/26 02:47

「cssを用いて、各プラウザ事に設定していきたい」理由は、「ブラウザによって本当にデザインを変えたい」のか「ブラウザごとの機能対応の違いが問題でCSSを切り分けたい」のか、どちらでしょうか。

mutsuki22

2019/02/26 02:56

説明不足ですみません。前者になると思います。 reset.cssとかも用いたのですが、ブラウザ事でどうしてもズレが生じるので微調整が目的です。

yoshinavi

2019/02/26 03:22

単位をdpcmではなく、dppxではどうですか？

mutsuki22

2019/02/26 04:35

単位変えてみましたが、変えたらファイルが開けなくなってしまいました。

行動規範の内容に同意します

回答1件

ベストアンサー

cssの記述順も疑ったのですが、firefoxの方が先に記述していました。

とありますが、CSSは後に書いたものが優先されるので、逆にすることでひとまずの解決にはなるのではないでしょうか？

投稿2019/02/26 04:05

yu-smc

総合スコア610

mutsuki22

2019/02/26 04:58 編集

とりあえずの解決はしました。ありがとうございます。そうでした。申し訳ありません、初歩的な部分が抜けてました。どうも悩むと視野が狭くなってしまいます。これで1時間以上悩むとはお恥ずかしい限りです。今後は初心に帰って落ち着くように気をつけます。ものすごく初歩的な事でとりあえず解決はしたのが申し訳ない限りです。しかし、なんでfirefoxに適用されてしまうのかという根本的な部分がまだ分からないので、もし分かる方がいれば教えて頂けると幸いです。