我有一个响应迅速的网站,适用于所有设备。
但是,提交表单的按钮在iPhone上不起作用。你不能按它。我不知道为什么。
(注意:我正在iphone 4上进行测试,所以我不知道这是否是旧的iphone问题)
我很困惑的是,如果我在iPhone上使用那个小提琴,你可以按下按钮。但在我的网站上,它不起作用。我不明白为什么会这样。
我将我的HTML和CSS复制到小提琴中,所以我没有改变任何东西。
My site, click contact to see the form
以下是表单的HTML
<!--CONTACT OVERLAY-->
<div class="overlay" id="overlay"></div>
<div class="box" id="box">
<p class="contactMessage">Message me, I'll get back to you</p>
<a class="boxclose" id="boxclose"></a>
<form method="post" action="index.php">
<label for="Name">Name:</label>
<br />
<input name="Name" type="text" />
<br /><br />
<label for="Email">Email:</label>
<br />
<input name="Email" type="text" />
<br /><br />
<label for="Comments">Comments:</label>
<br />
<textarea name="Comments"></textarea>
<br />
<button type="submit" value="Send">Say hello</button>
</form>
</div>
和CSS。 (SASS)
/*Contact Overlay*/
.overlay{
background-color:black;
top:0px;
bottom:0px;
left:0px;
right:0px;
height:100%;
z-index:100;
position:absolute;
display:none;
opacity:.75;
}
.box{
position:fixed;
display:none;
width:350px;
top:-300px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
background-color:#fff;
color:#7F7F7F;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
p{
line-height:.85em;
margin-left:10px;
}
label{
margin-top:15px;
font-family:'Yanone Kaffeesatz', sans-serif;
font-size:30px;
margin-left:10px;
}
input{
width:85%;
margin-left:10px;
height:25px;
}
textarea{
width:85%;
margin-left:10px;
}
button{
width:85%;
margin-left:10px;
}
}
@media (max-width: 600px){
.box{
width:250px;
}
a.boxclose{
margin-top:-168px !important;
}
}
a.boxclose{
float:right;
width:26px;
height:26px;
background:url(../img/cancel.png)repeat top left;
margin-top:-130px;
margin-right:-30px;
cursor:pointer;
}
/*Contact Form*/
.contactMessage{
margin-bottom:25px;
}
答案 0 :(得分:0)
尝试从
改变<button type="submit" value="Send">Say hello</button>
到
<input type="submit" value="Say hello" />