几个单选按钮在运行最新 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 方法)
最佳答案
由于所有输入的 width: 300px;
,定位首先发生变化。因此,您可以将其设置回自动,而不是为单选按钮添加新的魔数(Magic Number)。此外,单选按钮的样式比一般输入按钮的样式更具体,因此您不需要 !important
。所以这应该有效:
#contactform input[type="radio"] {
display: inline-block;
margin-top: 5px;
width: auto;
}
如果你想在单选按钮和文本之间再次留出一些空间,你当然可以用这样的东西把它加回去:margin-right: 10px;
关于html - 单选按钮在 iPad 上显示不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28527152/