ブラウザ別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効かなくなってしまいました.

Accepted Answer

**cssハック**という古代の技術を使うべきでないというのはtmswさんの回答に同意なのですが･･･。

> cssハックを入力しないと、ブラウザごとにかなり崩れてしまったので

もしかしてリセットcssもやってないのでは･･･？という推測してます。
cssハックを未だ使おうとしていることもあり、あまりよく知らないのではという理由です。

---
知らないと事だったので一応リセットcssについて軽く説明を。
リセットcssは簡単に言うとブラウザ間のデフォルトで掛かっているcssを全て何も掛かっていない
状態にするものです。

```css
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}
/*上記はリセットcssの一部を切り取ったものですので、そのまま使わないように*/
```
cssは基本的に後勝ちなので、これをreset.cssとして、適用した後に実際適用したいcssを
入れることによってデフォルトのcssを無効化しつつ、自分の意図したスタイルに出来ます。

リセットcssは色々種類有るのでご自分で調べてみて好きなのを使われてください。

Answer

>cssの記述や使用しているcssハックに問題があるかご指摘お願いいたします。

強いて言うならCSSハックをしていること自体に問題があるので速攻辞めるべきです。
~~**ie8やie9などのゴミに使っていましたが**~~現在使う理由は特に無いはずです。

スライダー下のロゴの配置であれば普通に書いても十分対応できます。

多分、今のCSSのままでは質問者様のブラウザではある程度普通に表示されてても、多くの利用者のブラウザで崩れた酷いページになってしまうと思いますよ。

付け焼刃ではありますが、一応、こうすればある程度統一できるだろうと思われる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;
}
}
}
コード
```

前提・実現したいこと

該当のソースコード

試したこと

関連した質問