Question

一些单选按钮显示在iPad（Safari）上运行最新的IOS 8 .... ...

按钮在所有其他浏览器（PC和Android手机）中的显示方式如下：

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

这是我的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：default-button或-webkit-appearance：radio ）。还尝试将 onclick =＆＃34;＆＃34; 添加到我的HTML标签，并根据此网站上的其他主题输入。仍然没有运气。

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

Answer 1

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

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

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

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

1 个答案: