我最近设计了一个网页，我不是网络开发者，所以我收集了来自不同地点的碎片和碎片，并将它们缝合起来。
现在，该页面已完全设计并可在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/sga267@uky.edu" 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>
具体来说，什么不起作用：
是否有任何错误：不，按下按钮后没有任何反应
我在寻找：
PS_1：如果您不想复制粘贴此代码，则表明其处于工作状态here
PS_2：我说safari，我的意思是iPhone上的那个
答案 0 :(得分：1)
尝试移动“dynamicInput_1”div之外的“Emotion”输入文本框。所以，而不是：
<form method="POST" action="http://formspree.io/sga267@uky.edu" 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>
尝试：
<form method="POST" action="http://formspree.io/sga267@uky.edu" align="center">
<div id = "dynamicInputHolder">
Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
<div id="dynamicInput_1">
<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>
另外，请看一下使用id和class的这个解释：div class vs id 你有几个使用相同ID的div。 ID应该是唯一的。
我不确定你在底部固定滚动条的意思，所以我没有解决这个问题。
答案 1 :(得分：0)