Safari忽略輸入複選框的位置和寬度/高度以及稍微移動一次檢查

我一直在通過互聯網尋找這個問題，但我似乎無法找到一個解決所有的問題，如果我有一個父div，，但不會中心複選框（只在safari中）我試着移動它使用不同的方法，如保證金，左/右等等，但沒有任何東西讓這個小混蛋從原來的位置移動。寬度/高度都不起作用。Safari忽略輸入複選框的位置和寬度/高度以及稍微移動一次檢查

.right-content{ 
    position: fixed; 
    right: 0; 
    bottom: 0; 
    height: 0; 
    width: 300px; 
    overflow-y: hidden; 
    transition: 0.5s; 
    background-color: #DC0000; 
    text-align: center; 
} 

.right-content a { 
    padding: 3px 3px 3px 3px; 
    text-decoration: none; 
    color: black; 
    display: block; 
    transition: 0.3s; 
} 

<div id="sidebarMort" class="right-content"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeSIdeBar()">&times;</a> 
    <a style="margin-top: 50px"><h2>Mortgage Calculator</h2></a> 
    <a><input name="income" type="text" id="income" placeholder="Annual Income"></a><br> 
    <p>Are you First Time Buyer?</p><br> 
    <a>Yes<input type="checkbox" id="ftb" value="ftb"></a><br> 
    <a><p>No</p><input type="checkbox" id="stb" value="stb"></a> 
    <a><input type="submit" class="btnOnBar" value="Calculate"></a> 
</div>

來源

2017-09-08 Luke

@Luke我不認爲有必要將Input放在錨標籤內。請先更新您的代碼。這裏是更新後的代碼，請檢查。 Ypu可以使用label而不是anchor tag。您可以使用css按照您的要求更新視覺效果。

<div id="sidebarMort" class="right-content"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeSIdeBar()">&times;</a> 
 
    <a style="margin-top: 50px"><h2>Mortgage Calculator</h2></a> 
 
    <a><input name="income" type="text" id="income" placeholder="Annual Income"></a><br> 
 
    <p>Are you First Time Buyer?</p><br> 
 
    <label for="ftb">Yes<input type="checkbox" id="ftb" value="ftb"></label> 
 
    <label for="stb">No<input type="checkbox" id="stb" value="stb"></label> 
 
    <input type="submit" class="btnOnBar" value="Calculate"> 
 
</div>

來源

2017-09-08 09:42:22

Safari忽略輸入複選框的位置和寬度/高度以及稍微移動一次檢查

回答

相關問題