1
我最近设计了一个网页，我不是一个网页开发人员，所以我收集了来自不同地点的碎片和碎片，并将它们缝合起来。按钮不工作在iPhone上的Safari浏览器
现在，该页面已完全设计，并在Firefox，Chrome和IE中工作。
但它不适用于Safari。
下面是代码：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="referrer" content="origin">
<script>
var counter = 0;
var limit = 50;
function addInput(divName, arrName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<input type='text' name='" + arrName + "[]' required>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
<style>
html *
{
color: #000 !important;
font-family: Arial !important;
}
.wrapper
{
height: 100%;
width: 100%;
display: flex;
overflow:auto;
}
.window
{
width: 100%;
min-height: 200px;
display: flex;
flex-direction: column-reverse;
float: none;
align-items: center;
justify-content: center;
}
.windowContent
{
}
input[type=text], select {
width: 150%;
padding: 6px 10px;
margin: 4px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 80%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]{
width: 50%;
background-color: #9CAFFF;
color: white;
padding: 6px 5px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 0px;
float: left;
width: 75%;
margin: 5px;
margin-left: 0.5cm;
}
.floating-box {
float: left;
width: 100%;
margin: 5px;
margin-left: 0.5cm;
border: 3px solid #73AD21;
}
</style>
</head>
<body onload="GenerateEmotion()">
<div class="wrapper">
<div class="window">
<div class="windowContent">
<form method="POST" action="http://formspree.io/[email protected]" align="center">
<div id = "dynamicInputHolder">
<div id="dynamicInput_1">
Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
<div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
<div id = "dynamicInputHolder">
<div id="dynamicInput_2">
<div class="floating-box">Sally heard a knock on the door.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_2', 'myInputs_2');">
</div>
<div id = "dynamicInputHolder">
<div id="dynamicInput_3">
<div class="floating-box">Her heartbeat fast, Sally began to walk down the aisle.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_3', 'myInputs_3');">
</div>
<br>
<input type="submit" value="I have completed a story">
</form>
<script>
function GenerateEmotion(){
var emotion = "";
var raw = Math.random();
var final = Math.ceil(raw * 4);
if (final == 1)
document.getElementById("emotion").value = "Happy";
else if (final == 2)
document.getElementById("emotion").value = "Sad";
else if (final == 3)
document.getElementById("emotion").value = "Angry";
else if (final == 4)
document.getElementById("emotion").value = "Surprise";
}
</script>
</div>
</div>
<div class="window">
<div class="windowContent">
<p><font size="6"><b>Emotionalize it!</b></font></p>
<p><font size="3">We are trying to develop computer programs that can understand common emotions, so they can communicate better with human users.</font></p>
<p><font size="5"><b> Rules of the game </b></font></p>
<font size="3">
<p>Imagine you are a narrator. Today, you are narrating a story of John and Sally's wedding.</p>
<p>Your goal is to make your audience experience the emotion written on the left top. </p>
<p>We are helping you to maintain the flow, you just need to connect the dots!</p>
<p>As your story will be fed to a giant computer program, so can you:</p>
<ul>
<li>Please use simple language. Do NOT use compound, complex, or conditional sentences</li>
<li>Please do not use pronouns. Use the name - John instead of 'him'</li>
<li>Please use the past tense and active voice.</li>
<li>Please make sure to include events from the beginning to the end.</li>
<li>You want more characters? If yes, Please use David(male) and Amy(female)</li>
<li>You can use the also include character based actions, e.g. 'A waiter ...'</li>
<li>Your audiance should experience the said emotion</li>
</ul>
</font>
</div>
</div>
</div>
</body>
</html>
具体来说，什么行不通：
- 按钮，点击 '添加新的句子'
- 提交
是否有任何错误：没有，按下按钮后没有任何反应
我寻找出来：
- 如果你的Web开发人能弄清楚为什么它不Safari上工作，这将是很大的帮助。
- 如何更改该部分，所以功能仍然相同，但它在Safari上的工作原理
- 因为我已经问过这个问题，另一方面的问题会有所帮助。我可以知道如何修复底部的滚动条吗？
PS_1：如果你不喜欢复制粘贴此代码，它是在工作状态here
PS_2：当我说Safari浏览器，我的意思是在iPhone
您应该创建[mcve]，而不是将整个页面转储到问题中。 – Quentin
您的HTML中有一些机器可检测到的错误。使用[验证器]（https://validator.nu）。 – Quentin