创建测验：为什么它在Safari中不起作用

时间：2015-02-28 13:09:30

标签： html css safari

测验在firefox和Chrome中完美呈现，只是Safari似乎有一些问题。它立即显示最后一个测试，而不是像chrome和firefox那样的第一个测试。我究竟做错了什么。 （我使用的是Safari Version 8.0.2（10600.2.5））。

＆＃13;
＆＃13; 
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); }
＆＃13; 
<!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>A simple Quiz in pure CSS</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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

问题是webkit不理解没有供应商前缀的转换和转换属性。复制每一行转换并转换并用-webkit-transision和-webkit- transform替换副本。

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;

    -webkit-transform: translate3d(150%, 0, 0);
    -webkit-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);
    -webkit-transform: translate3d(0, 0, 0);

}
<!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>A simple Quiz in pure CSS</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>

P.S。上面的代码段在预览框中无法正常运行，因为某些stackoverflows css正在干扰。但它确实在整页预览中正确运行。

相关问题
最新问题