html - 单选按钮在 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 上保留您的 native UI 设置，但它不起作用(我尝试了诸如 .... - webkit-appearance: default-button 或 -webkit-appearance: radio)。还尝试按照本网站上的另一个主题将 onclick="" 添加到我的 HTML 标签和输入中。仍然没有运气。

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

Answer 1

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

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

如果你想在单选按钮和文本之间再次留出一些空间，你当然可以用这样的东西把它加回去:margin-right: 10px;