html - Safari 忽略输入复选框的定位和宽度/高度，并在选中后略微移动

Question

我一直在互联网上寻找这个问题，但我似乎找不到解决所有问题的方法，如果我有一个将所有元​​素居中的父 div，但不会将复选框居中(仅在 safari 中)我尝试移动它是关于使用不同的方法，如边距、左/右等，但没有什么能让那个小 SCSS 离开原来的地方。宽度/高度也不起作用。

.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>

Answer 1

@Luke 我认为不需要将 Input 放在 anchor 标记内。请先更新您的代码。这是更新的代码，请检查。 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>