请耐心等待。这是我的第一个问题＆amp;我不是专家，也没有经常用于测试的iOS设备。
我在我的婚礼网站的免费教程页面上找到了这个CSS联系表格，因为我的未婚夫喜欢它。它在我的台式电脑和Android设备上运行良好但是当我有一个朋友在他的iPhone 6+（Safari和Chrome）上测试它时，我发现它不起作用。在iOS上，信封图像会加载，但悬停或点击时没有转换。我也在iPhone 5（Safari）上进行了测试，结果相同。
过去一周我一直试图解决这个问题，包括尝试了许多提议的问题。我在SO上找到的建议。其中一些如下：
建议的问题：
:hover在iOS上不起作用 解决方案1：对每个使用的实例使用:active和/或:focus：悬停
解决方案2：将cursor:pointer添加到CSS元素或div中 解决方案3：将身体标签更改为<body ontouchstart="">
解决方案4：添加document.addEventListener("touchstart", function() {},false);
我甚至不知道iOS中是否仍然存在:hover问题，因为提到该问题的大多数SO页面已超过一年。在尝试了上述建议解决方案的混合匹配后，我发现解决方案3或解决方案4已经过渡到iOS上工作但有几个故障：
GLITCH 1：当页面首次加载时，除非您实际触摸并将手指放在信封上，否则转换将不起作用。第二个你把手指从屏幕上移开，表格滑下来 GLITCH 2：如果稍微缩放屏幕，转换似乎正常工作（单击或触摸以触发转换）。但是，如果以横向方式查看页面，则会返回到必须触摸并保持转换才能工作 GLITCH 3：如果您进一步缩放屏幕，表格会自动弹出信封，无需转换......无论是触摸，点击还是长按。
是什么导致它无法在iOS上运行？
我该如何纠正这个问题？
这是一个令人沮丧的一周，但我不想放弃，我谦卑地请求任何人的任何帮助/解释。我为这个长期问题道歉。我试图遵循发布规则，并提供足够的细节来帮助找到解决方案。非常感谢你提前。
这是 link to the working demo.（在PC上鼠标悬停或在Android上触摸信封顶部）
这是 link to the tutorial page for this demo.
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Contact Form</title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<!--[if IE]><script>
$(document).ready(function() {
$("#form_wrap").addClass('hide');
})
</script><![endif]-->
</head>
<body>
<div id="wrap">
<h1>Send a message</h1>
<div id='form_wrap'>
<form>
<p>Hello Joe,</p>
<label for="email">Your Message : </label>
<textarea name="message" value="Your Message" id="message" ></textarea>
<p>Best,</p>
<label for="name">Name: </label>
<input type="text" name="name" value="" id="name" />
<label for="email">Email: </label>
<input type="text" name="email" value="" id="email" />
<input type="submit" name ="submit" value="Now, I send, thanks!" />
</form>
</div>
</div>
</body>
</html>
CSS：
body, div, h1,h2, form, fieldset, input, textarea, footer,p {
margin: 0;
padding: 0;
border: 0;
outline: none;
}
@font-face {
font-family: 'YanoneKaffeesatzRegular';
src: url('yanonekaffeesatz-regular-webfont.eot');
src: url('yanonekaffeesatz-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('yanonekaffeesatz-regular-webfont.woff') format('woff'),
url('yanonekaffeesatz-regular-webfont.ttf') format('truetype'),
url('yanonekaffeesatz-regular-webfont.svg#YanoneKaffeesatzRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background: #ccc url('images/bg_out.png');
color: #7c7873;
font-family: 'YanoneKaffeesatzRegular';
}
p {
text-shadow:0 1px 0 #fff;
font-size:24px;
}
#wrap {
width:530px;
margin:20px auto 0;
height:1000px;
}
h1 {
margin-bottom:20px;
text-align:center;
font-size:48px;
text-shadow:0 1px 0 #ede8d9;
}
#form_wrap {
overflow:hidden;
height:446px;
position:relative;
top:0px;
-webkit-transition: all 1s ease-in-out .3s;
-moz-transition: all 1s ease-in-out .3s;
-o-transition: all 1s ease-in-out .3s;
transition: all 1s ease-in-out .3s;
}
#form_wrap:before {
content:"";
position:absolute;
bottom:128px;
left:0px;
background:url('images/before.png');
width:530px;
height: 316px;
}
#form_wrap:after {
content:"";
position:absolute;
bottom:0px;
left:0;
background:url('images/after.png');
width:530px;
height: 260px;
}
#form_wrap.hide:after, #form_wrap.hide:before {
display:none;
}
#form_wrap:hover {
height:776px;
top:-200px;
}
form {
background:#f7f2ec url('images/letter_bg.png');
position:relative;
top:200px;
overflow:hidden;
height:200px;
width:400px;
margin:0px auto;
padding:20px;
border: 1px solid #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
-moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff;
-webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
-webkit-transition: all 1s ease-in-out .3s;
-moz-transition: all 1s ease-in-out .3s;
-o-transition: all 1s ease-in-out .3s;
transition: all 1s ease-in-out .3s;
}
#form_wrap:hover form {
height:530px;
}
label {
margin: 11px 20px 0 0;
font-size: 16px;
color: #b3aba1;
text-transform: uppercase;
text-shadow: 0px 1px 0px #fff;
}
input[type=text], textarea {
font: 14px normal normal uppercase helvetica, arial, serif;
color: #7c7873;
background:none;
width: 380px;
height: 36px;
padding: 0px 10px;
margin: 0 0 10px 0;
border:1px solid #f8f5f1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0px 0px 1px #726959;
-webkit-box-shadow: inset 0px 0px 1px #b3a895;
box-shadow: inset 0px 0px 1px #b3a895;
}
textarea {
height: 80px;
padding-top:14px;
}
textarea:focus, input[type=text]:focus {
background:rgba(255,255,255,.35);
}
#form_wrap input[type=submit] {
position:relative;
font-family: 'YanoneKaffeesatzRegular';
font-size:24px;
color: #7c7873;
text-shadow:0 1px 0 #fff;
width:100%;
text-align:center;
opacity:0;
background:none;
cursor: pointer;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: opacity .6s ease-in-out 0s;
-moz-transition: opacity .6s ease-in-out 0s;
-o-transition: opacity .6s ease-in-out 0s;
transition: opacity .6s ease-in-out 0s;
}
#form_wrap:hover input[type=submit] {
z-index:1;
opacity:1;
-webkit-transition: opacity .5s ease-in-out 1.3s;
-moz-transition: opacity .5s ease-in-out 1.3s;
-o-transition: opacity .5s ease-in-out 1.3s;
transition: opacity .5s ease-in-out 1.3s;
}
#form_wrap:hover input:hover[type=submit] {
color:#435c70;
}