ディビジョンがFirefox 50.0とIE 11で正しく配置されていません

Question

ChromeとMS Edgeに正しく配置されていますが、divはFirefoxとIE 11で正しく位置が決められていません。

私は{clear: both}と{overflow: hidden}を他の投稿に示唆しているように追加しようとしましたが、運がありませんでした。

スクロールマウスを画面の中央下部に配置したいが、右側に移動する。

私はa fiddleを作成しているし、あなたがその位置を見ることができますが、FirefoxとIEでオフになっている11

HTML：

<div class="container-fluid vertical-center"> 
    <div class="welcome"> 
    <h1>HELLO, WELCOME</h1> 
    <br> 
    <h2>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h2> 
    <p>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p> 
    <br> 
</div> 

<div class="scroll-downs"> 
    <div class="mousey"> 
    <div class="scroller"></div> 
    </div> 
    </div> 
</div> 

CSS：

.container-fluid { 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 15px; 
    padding-right: 15px 
} 
.container-fluid::after { 
    content: ""; 
    display: table; 
    clear: both 
} 
.vertical-center { 
    min-height: 100%; 
    /* Fallback for browsers do NOT support vh unit */ 

    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
.welcome { 
    text-align: center; 
} 
.scroll-downs { 
    position: absolute; 
    bottom: 20px; 
    margin: auto; 
    width: 37px; 
    height: 55px; 
} 
.mousey { 
    width: 37px; 
    padding: 10px 15px; 
    height: 55px; 
    border: 2px solid #666; 
    border-radius: 25px; 
    opacity: 0.75; 
} 
.scroller { 
    width: 3px; 
    height: 10px; 
    border-radius: 25%; 
    background-color: #666; 
    animation-name: scroll; 
    animation-duration: 2.2s; 
    animation-timing-function: cubic-bezier(.15,.41,.69,.94); 
    animation-iteration-count: infinite; 
} 
@keyframes scroll { 
    0% { opacity: 0; } 
    10% { transform: translateY(0); opacity: 1; } 
    100% { transform: translateY(20px); opacity: 0;} 
} 

Answer 1

は、ここで問題です：あなた」 margin:autoを使用して、絶対配置された要素を中央に配置しようとしました。これは、水平方向の位置決め値が指定されていないことを除いては問題ありません（left/right）。

絶対配置された要素を中心に配置する場合は、これらの値を定義する必要があります（通常は0の値で十分です）。そうしないと、ブラウザのデフォルトの振る舞いに従います。だからあなた宣言ブロックは、に変更します。

.scroll-downs { 
    position: absolute; 
    bottom: 20px; 
    margin: auto; 
    width: 37px; 
    height: 55px; 
    left:0; 
    right:0; 
} 

ここJSFiddleは、アクションのコードを表示します。お役に立てれば！ご質問がある場合はお知らせください。