輸入類型=範圍未在Firefox中伸縮

下面是一個示例。我想將滑塊拉伸到父容器的整個寬度。下面的代碼看起來像我想在Chrome中，但在Firefox中，滑塊並不伸縮。然而，我無法找到他們的跟蹤器上的任何錯誤，打開這個問題，也許我錯過了什麼？輸入類型=範圍未在Firefox中伸縮

#block { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: green; 
 
    align-items: stretch; 
 
} 
 

 
input { 
 
    background-color: yellow; 
 
}

<div id=block> 
 
    <input type=range /> 
 
</div>

來源

2017-06-13 Grief

請仔細閱讀並在我的答案發表評論，讓我知道，如果事情是不明確或缺少。如果不是，那麼如果你能接受最能幫助你的答案，那將是非常好的。 – LGSon

與列方向A彎曲的容器，並作爲align-items的默認值是stretch，將拉伸柔性物品填充它的容器沿其橫軸，這是相同的作爲它的寬度。

因此，在你的情況下，它應該像現在這樣工作，儘管在Firefox，Edge和IE中並非如此。他們都需要width: 100% 類型range來填充容器。

作爲對比，text類型和checkbox的input，並textarea，做伸展跨瀏覽器，但同樣input典型checkbox在Firefox沒有。

無論Firefox（和Edge/IE）是否正確或存在錯誤，我還不能說。我已經搜遍了，找不到直接的答案，但只要我這樣做，我會更新這個答案。

因此，從今天起，我建議將寬度設置爲100％，如果Chrome瀏覽器正確，則不會造成任何損害，並且可以在以後刪除。

#block { 
 
    /* width: 100%;    not needed since it is the default */ 
 
    height: 100%;    /* as its parent doesn't have a height, 
 
           this doesn't do anything */ 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: green; 
 
    /* align-items: stretch;  this is the defalt and can be omitted */ 
 
} 
 

 
input, textarea, span { 
 
    background-color: yellow; 
 

 
    width: 100%;    /* make FF/Edge/IE stretch input range */ 
 
    
 
    margin: 0;    /* remove any default margin an element might have */ 
 
    padding: 0;    /* remove any default padding an element might have */ 
 

 
    box-sizing: border-box; /* include border an element might have in the set width */ 
 
}

<div id=block> 
 
    <input type=range /> 
 
    
 
    <!-- added these for comparison --> 
 
    <input type=checkbox /> 
 
    <input type=text value="Input text"/> 
 
    <textarea>Textarea</textarea> 
 
    <span>Span</span> 
 
    
 
</div>

來源

2017-06-13 13:34:37 LGSon

在第一個變體中，您忘記了@Tobi在另一個答案中添加了「margin：0」。第二個變體不適合我的需要 - 我需要垂直彎曲。但是，它並沒有回答這個問題 - 它是Firefox中的一個錯誤還是什麼？ – Grief

@Grief更新了我的答案 – LGSon

您必須將<input>標籤的寬度設置爲100％，以得到你想要的！

#block { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: green; 
 
    padding: 0; 
 
} 
 

 
input { 
 
    background-color: yellow; 
 
    width: 100%; 
 
    margin: 0; 
 
}

<div id=block> 
 
    <input type=range /> 
 
</div>

來源

2017-06-13 11:53:26 Tobi

您還添加了'margin：0'，因爲沒有它會導致容器溢出。最好讓中間'div'具有非零邊距。但是它並沒有回答這個問題，它是Firefox中的一個錯誤，還是我錯誤地使用了flexbox模型？ – Grief

輸入類型=範圍未在Firefox中伸縮

回答

相關問題