股利不正確地定位在Firefox 50.0和IE 11

我有一個div未正確地定位在本身Firefox和IE 11，雖然它被正確地定位在Chrome和MS邊緣。股利不正確地定位在Firefox 50.0和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;} 
}

來源

2016-11-24 cblakey

請務必在您的問題中包含實際的相關代碼，而不是格式化爲代碼的鏈接。這對於這個問題的讀者來說真的很不方便，並且很可能會在這條路上倒下。 – Serlite

歡迎來到Stack Overflow！尋求調試幫助的問題必須包括在問題本身中重現它的最短代碼**注意 - 請不要濫用代碼塊來解決此問題**。 –

@Serlite是的，我意識到這一點，並立即改變它，第一次發佈，所以不知道正確的格式。 – cblakey

這裏的問題：你」重新嘗試使用margin:auto來居中放置一個絕對定位的元素，這很好 - 除非您沒有爲其指定任何水平定位值（left/right）。

當使用這種技術來中心的絕對定位的元素，這些值必須被定義（通常爲0的值就足夠了），或者你會在瀏覽器的默認行爲的擺佈。所以修改你的聲明塊爲：

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

這裏是一個JSFiddle來顯示代碼的行動。希望這可以幫助！如果您有任何問題，請告訴我。

來源

2016-11-24 16:22:57 Serlite

非常感謝@Serlite。 – cblakey

股利不正確地定位在Firefox 50.0和IE 11

回答

相關問題