單選按鈕/複選框在Safari 8和9在Mac機上單擊時移動

我有一個帶有複選框和單選按鈕的表單，我需要給它一個高度並垂直對齊它以便與標籤對齊（它可以有不同的行高）單選按鈕/複選框在Safari 8和9在Mac機上單擊時移動

input[type="checkbox"],input[type="radio"] { 
    margin:0px; 
    vertical-align: -webkit-baseline-middle; 
    float: none; 
    height: 38px; 
    } 

label { 
line-height: 38px; 
}

你可以看到它在http://jsfiddle.net/9my3ksf3/1/

來源

2015-10-06 Nik

此外，類似的問題與縮放可以在http://jsfiddle.net/leaverou/zBuyN/可以看出，這適用於所有瀏覽器和設備，除了Safari機器人8以及Mac機器以外。 – Nik

的複選框，單選按鈕預期，因爲不是所有的瀏覽器聽在設置這些投入的高度和寬度不工作同樣的方式。

高度和寬度仍然存在，但按鈕不是以該大小呈現，所以當您單擊它時，它將在容器中移動，該容器具有您設置的高度。爲什麼這是我不知道的，但高度是問題的原因。嘗試刪除它，點擊它時該按鈕應停止移動。我知道這並不理想，所以或許一個更好的問題是「如何在Safari中設置廣播/複選框輸入的寬度和高度？」

這裏有一個偉大的文章，比較不同的瀏覽器設置寬度和高度上的單選按鈕的效果：http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

來源

2016-01-12 19:44:12

單選按鈕/複選框在Safari 8和9在Mac機上單擊時移動

回答

相關問題