Hallo, ich habe hier ein einfaches HTML5 und CSS Quiz, das Quiz wird auch in Firefox und Chrome richtig dargestellt, nur in Safari nicht, (da landet man direkt bei der letzten test <div> wo liegt mein Fehler? Oder liegt es evtl. doch an der CSS?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="quiz_test.css" type="text/css">
<meta>
<title>test</title>
</head>
<body>
<h1>Quiz</h1>
<div class="test">
<h3 class="question">1 + 2 = ?</h3>
<input type="radio" name="1" id="1-1" class="false"> <label for="1-1" class="answer">12</label><br>
<input type="radio" name="1" id="1-2" class="true"> <label for="1-2" class="answer">3</label>
<div class="test">
<h3 class="question">red - green, orange - blue, yellow - ?</h3>
<input type="radio" name="2" id="2-1" class="false"> <label for="2-1" class="answer">magenta</label><br>
<input type="radio" name="2" id="2-2" class="true"> <label for="2-2" class="answer">purple</label><br>
<input type="radio" name="2" id="2-3" class="false"> <label for="2-3" class="answer">cyan</label>
<div class="test">
<h3 class="question">name the fish!</h3>
<input type="radio" name="3" id="3-1" class="true"> <label for="3-1" class="answer">shark</label><br>
<input type="radio" name="3" id="3-2" class="false"> <label for="3-2" class="answer">dolphin</label><br>
<input type="radio" name="3" id="3-3" class="false"> <label for="3-3" class="answer">whale</label><br>
<input type="radio" name="3" id="3-4" class="false"> <label for="3-4" class="answer">all of the above</label>
<div class="test">
<h1>YOU WIN!!!</h1>
<a href="">play again</a>
</div>
</div>
</div>
</div>
</body>
</html>
HTML:
body {
font-size: 100%;
background: white;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300; }
input[type=radio],
input[type=checkbox] {
font-size: 0.8em;
position: relative;
display: inline-block;
vertical-align: middle;
border: 0.1em solid #bbbbbb;
background: none;
padding: 0.2em;
margin: 0 0.2em;
font-family: Consolas, "Courier New", monospace;
width: 1em;
height: 1em;
box-sizing: border-box;
-webkit-appearance: none; }
input[type=radio]:focus,
input[type=checkbox]:focus {
outline: 0;
border-color: #335599; }
input[type=radio] {
border-radius: 100%;
background-clip: content-box; }
input[type=radio]:checked {
background-color: #44aacc; }
h1 {
font-size: 2em;
margin: 1em auto;
text-align: center; }
.test {
position: absolute;
top: 25%;
bottom: 25%;
right: 25%;
left: 25%;
background: white; }
.test a {
display: block;
text-align: center;
padding: 0.5em 1em;
border-radius: 3px;
text-decoration: none;
background: #666666;
color: white; }
.test a:hover {
background: #4d4d4d; }
.test .question {
font-size: 1.3em;
margin: 0.5em 0;
border-bottom: 2px dashed #666666; }
.test .answer {
display: inline-block;
padding: 0.5em 1em;
cursor: pointer;
border-bottom: 4px solid white; }
.test .answer:hover {
border-color: #bbbbbb; }
.test .test {
transform: translate3d(150%, 0, 0);
transition: transform 100ms;
top: 0;
bottom: 0;
right: 0;
left: 0; }
.test .false:checked + .answer {
border-color: #dd4411; }
.test .true:checked ~ .test {
transform: translate3d(0, 0, 0); }