单选按钮在 iPad 上显示不正确

Question

在运行最新 IOS 8 的 iPad (Safari) 上，几个单选按钮显示混乱......

这是按钮在所有其他浏览器（PC 和 Android 手机）中的外观：

http://dotwdesign.com/right/right.png

这是它在 iPad 上的显示方式（见左侧按钮，错位和方形）：

http://dotwdesign.com/wrong/wrong.jpg

这是我的 HTML（这两个包含 div 是因为我嵌入了一些额外的不相关代码 [隐藏在这里] - 请不要注意:)）

    <div id= "contactform"> 

    <div id="theform">
    <form method="post" action="php/webmailer.php" name="form" id="message_form">                
    <ol>
        <li>
                <label for="full_name">First Name</label>
                <input type="text" name="fname" />
        </li>
        <li>
                <label for="lname">Last Name</label>
                <input type="text" name="lname" />
        </li>                               
        <li>
                <label for="email">Email</label>
                <input type="text" name="email" />  
        </li>   
        <li>
                <label for="phone">Phone</label>
                <input type="text" name="phone" />  
        </li>
        <li>

                <label for="method">Preferred contact method</label>

                <label for="Email">
                <input type="radio" name="method" value="Email" checked />
                Email</label>                                   

                <label for="Phone">
                <input type="radio" name="method" value="Phone" />
                Phone</label><br>   
        </li>       
        <li>
                <label for="comments">Your Message</label>
                <textarea name="message"></textarea> 
        </li>                  

                <input type="submit" name="submit" value="Submit" />                            
    </form> 
</ol>   

</div><!--end of theform div--> 

</div><!--end of contactform div-->

这是我的 CSS...

#contactform {
    position: relative;
    float: left;
    margin: 50px 0 50px 80px;
    width: auto;    
}
#contactform ol li  {
    list-style-type:none; 
}
#contactform input{
    display:block; 
    width:300px;
    margin-left: 0;
    border:1px #000 solid; 
    border-radius: 3px;
    padding: 5px;  
}                       
#contactform textarea{
    height:150px;
    display:block; 
    width:300px;
    margin-top: 3px;
    border:1px #000 solid;
    border-radius: 3px;
    padding: 5px;   
}   
#contactform input:hover, textarea:hover {
    background-color:#E0E0E0; 
}
#contactform input:focus, textarea:focus{
    background-color:#E0E0E0; 
}   
#contactform label{
    display:block;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
    margin-top:10px; 
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
    width: 330px;
}               
#contactform input[type="radio"]{
    display: inline-block !important;
    margin-top: 5px !important;
    margin-left: -90px !important;  
    margin-right: -80px !important;
    width: 200px !important;
}               
#contactform input[type="submit"]   {
    margin: 30px 0 0 120px;         
    width: 70px;
    font-size: 15.5px;      
}
#contactform input[type="submit"]:hover{
    cursor: pointer; 
    cursor: hand;
}
#theform{ 
    float: left;
    border-radius: 6px;
    background-color: #558ED5;
    padding: 25px 0;
    width:400px;
    box-shadow: 10px 10px 3px rgba(12, 3, 25, 0.8);
}

经过一些在线研究后，我发现了一个 -webkit-appearance 选项，它允许您在 Safari 上保留本机 UI 设置，但它不起作用（我尝试了诸如 .... - webkit-appearance：默认按钮或-webkit-appearance：收音机）。还尝试根据此站点上的另一个线程将 onclick="" 添加到我的 HTML 标签和输入中。还是没有运气。

如果有人可以就如何解决此问题提供一些指导，我们将不胜感激。该站点上的其他一些线程解决了这个问题，但使用脚本方法（而不是 CSS 方法）

Answer 1

由于所有输入的width: 300px;，定位首先会发生变化。因此，您可以将其设置回自动，而不是为单选按钮添加新的幻数。此外，单选按钮的样式比一般输入更具体，因此您不需要!important。所以这应该有效：

#contactform input[type="radio"] {
    display: inline-block;
    margin-top: 5px;
    width: auto;
}

如果您想再次在单选按钮和文本之间留出更多空间，您当然可以使用以下内容将其添加回来：margin-right: 10px;