ブラウザ別cssのエラー

Question

前提・実現したいこと

現在トップページにスライダーを設置しまして、その下にロゴを配置しているのですが
ブラウザによって空間が空いてしまって``````ここに言語を入力
ここに言語を入力
表示が違うので統一したいと思っています。
ファイアフォックスの空間に統一したいです。
画像鵜URLを一番下の補足情報にに添付いたします。
cssの記述や使用しているcssハックに問題があるかご指摘お願いいたします。

該当のソースコード

/*タブレット向け*/
@media only screen and (min-width: 481px)  {
#francecolle {
	background: #ffffff url(../image/logo.png) no-repeat center;
	height: 178px;
	padding:0 0 200px 0;
	margin:300px 0 0 0;
}
}


/*PC向け クロム*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
#francecolle {
	background: #ffffff url(../image/logo.png) no-repeat center;
	height: 178px;
	padding:0 0 350px 0;
	margin:350px 0 0 0;
}
}


/*PC向け IE*/
@media all and (-ms-high-contrast:none) {
@media only screen and (min-width: 769px) {

	*::-ms-backdrop,　#francecolle {
	background: #ffffff url(../image/logo.png) no-repeat center;
	height: 178px;
	padding:0 0 350px 0;
	margin:100px 0 0 0;
}
}
}

/*PC向け エッジ*/
@media only screen and (min-width: 769px) {
 #francecolle {
	background: #ffffff url(../image/logo.png) no-repeat center;
	height: 178px;
	padding:0 0 350px 0;
	margin:650px 0 0 0;
}
}

/*PC向け ファイアフォックス*/
@-moz-document url-prefix(){
@media only screen and (min-width: 769px) {
#francecolle {
	background: #ffffff url(../image/logo.png) no-repeat center;
	height: 178px;
	padding:0 0 350px 0;
	margin:650px 0 0 0;
}
}
}

試したこと

cssハックを使用し、各ブラウザに当てはめていったのですが、
firefoxとedgeには適用できまして、
IEとchromeがを操作しようとするとcss効かなくなってしまいました.

Comments

[K_3578]

話がよくわからんけど画像は極力teratail自体に上げて欲しいっす。
同じ表示にするならcssハックする意味あるのかな？

[kimu05]

ありがとうございます！こちらにアップできるとわかりませんでした。
アップし直しました。
cssハックを入力しないと、ブラウザごとにかなり崩れてしまったので（今基準にしているfirefoxとedgeも崩れてしまいました）
今回の質問をさせてもらいました。

[K_3578]

ちょっと質問のテンプレート崩れちゃってるっぽいので指摘しておきますね。
画像は
で良いです。2個重なってしまってるようなのでちょっと消して貰えればと。
それと、テンプレートとの間隔が空いてないので見出しが崩れちゃってます。


###前提・実現したいこと
↑のようにすれば良いです。

[K_3578]

あと、何かしらの端末で撮影したものだと正直差異がこちらからだと分かりづらいので、
画面の差異を画像で提示する時はスクリーンショット使われた方がよろしいかと。

[kimu05]

なるほど、崩れてしまってました！
ありがとうございます。
修正済みです。

[K_3578]

回答後に質問内容を改変するのは極力やめて欲しいです。

回答やコメントに整合性が取れなくなるので。
画像に関しては内容がまずいなら運営への問い合わせで削除して貰ってください。

[K_3578]

画像消して貰ったのは良いんですけど、なんかコードブロック作りまくって質問文が意味不明になってますよ。

[kimu05]

連絡遅れてしまいました！ありがとうございます。

[K_3578]

``````ここに言語を入力 ここに言語を入力←これもついでに

[K_3578]

なぜこうなった･･･。
私が消して欲しかったのは
「ブラウザによって空間が空いてしまって``````ここに言語を入力
ここに言語を入力」の場所っす。
バッククォート消したらコードブロック無くなるので戻してください

[kimu05]

変な消しちゃいけないところまで消してしまったようです。
御手数おかけしました！！

[K_3578]

まだ直ってないけど･･･まぁいいや

Answer 1

cssハックという古代の技術を使うべきでないというのはtmswさんの回答に同意なのですが･･･。

cssハックを入力しないと、ブラウザごとにかなり崩れてしまったので

もしかしてリセットcssもやってないのでは･･･？という推測してます。
cssハックを未だ使おうとしていることもあり、あまりよく知らないのではという理由です。

---

知らないと事だったので一応リセットcssについて軽く説明を。
リセットcssは簡単に言うとブラウザ間のデフォルトで掛かっているcssを全て何も掛かっていない
状態にするものです。

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}
/*上記はリセットcssの一部を切り取ったものですので、そのまま使わないように*/

cssは基本的に後勝ちなので、これをreset.cssとして、適用した後に実際適用したいcssを
入れることによってデフォルトのcssを無効化しつつ、自分の意図したスタイルに出来ます。

リセットcssは色々種類有るのでご自分で調べてみて好きなのを使われてください。

Comments

[kimu05]

ご回答ありがとうございます!

cssを勉強し始めて日が浅く、K_3578様の仰る通り、リセットcssというのをしておりません。
なるほど、cssハックが古い方法でしたか。。

[K_3578]

コメント頂いたので一応軽くリセットcssについて説明を追記しました。

とりあえず適用してみて、それでも改善されないようなら他に原因があると思われます。

蛇足ですが、cssハックは意図的にバグを引き起こしてブラウザ間の差異を
無くした(ように見える)だけなので不具合の温床になりかねません。

[kimu05]

なるほど、
勉強不足ですね、、
調べてみて、作業してみます。
ありがとうございます！！

[kimu05]

リセットcss を使用し、無事に解決できました！
リセットCSSの存在をお教えてくださってありがとうございます。

[K_3578]

質問の修正依頼にも書きましたが、画像を見れなくするのはやめてください。
第三者が見たときに困ります。

履歴から見ようと思えば誰でも見れますので、何かしら隠したい理由があるなら運営への問い合わせで
teratail上から削除して貰ってください。

[kimu05]

解決後に削除してしまうとダメなのですね、修正しました。
他の人も見るということも考えます。

[K_3578]

まぁどこまで参考にするか知りませんが、個人情報漏洩を恐れるなら上記の通り運営への問い合わせで
画像を削除して貰ってください。

あの画像の主旨はどういう事が起こっているかを伝える目的なので、
個人情報の観点から画像は削除したが各ブラウザ間で表示が異なっている旨を追記しておけば
怒られる事は無いかと。

Answer 2

cssの記述や使用しているcssハックに問題があるかご指摘お願いいたします。

強いて言うならCSSハックをしていること自体に問題があるので速攻辞めるべきです。
~~ie8やie9などのゴミに使っていましたが~~現在使う理由は特に無いはずです。

スライダー下のロゴの配置であれば普通に書いても十分対応できます。

多分、今のCSSのままでは質問者様のブラウザではある程度普通に表示されてても、多くの利用者のブラウザで崩れた酷いページになってしまうと思いますよ。

付け焼刃ではありますが、一応、こうすればある程度統一できるだろうと思われるCSSを下に乗せておくので参考にしていただけると良いかなと思います。

@media only screen and (min-width: 481px)  {
#francecolle {
    background: #ffffff url(../image/logo.png) no-repeat center;
    height: 178px;
    padding:0 0 200px 0;
    margin:300px 0 0 0;
}
}


/*PC向け クロム*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
#francecolle {
    background: #ffffff url(../image/logo.png) no-repeat center;
    height: 178px;
    padding:0 0 350px 0;
    margin:300px 0 0 0; /* 細かい数値が分からないので大雑把ですが300に変更。それでもまだ下に寄りすぎな場合は３００から少しずつ数値を下げてください */
}
}


/*PC向け IE*/
@media all and (-ms-high-contrast:none) {
@media only screen and (min-width: 769px) {

    *::-ms-backdrop,　#francecolle {
    background: #ffffff url(../image/logo.png) no-repeat center;
    height: 178px;
    padding:0 0 350px 0;
    / * margin:100px 0 0 0; 上にマージンとってますがIEの物は下に行きすぎなのでこれは削除 */
}
}
}

/*PC向け エッジ*/
@media only screen and (min-width: 769px) {
 #francecolle {
    background: #ffffff url(../image/logo.png) no-repeat center;
    height: 178px;
    padding:0 0 350px 0;
    margin:650px 0 0 0;
}
}

/*PC向け ファイアフォックス*/
@-moz-document url-prefix(){
@media only screen and (min-width: 769px) {
#francecolle {
    background: #ffffff url(../image/logo.png) no-repeat center;
    height: 178px;
    padding:0 0 350px 0;
    margin:650px 0 0 0;
}
}
}
コード

Comments

[kimu05]

ご回答ありがとうございます!
cssハックが古い方法とは知らず、、
cssまでありがとうございます☆