Question

内容无法在firefox中工作。在chrome中工作得很漂亮有什么问题？请尽快查看并说明。

这是HTML

<html>
    <head>
      <link rel="stylesheet" type="text/css" href="mystyle.css">
     </head>
    <body>
      <input class="go" type="checkbox">
    </body>
</html>

这是CSS部分

.go {


    top: 5px;
        left: 150px;

        position: relative;
        margin: 35px auto;
        color: white;
        text-align: center;
        text-shadow: 0 1px 0 rgba(0,0,0,.5);
        font-size: 1.0em;
        cursor: pointer;
    }
    .go:before {
        top: -5px;
        left: -50px;
        position: absolute;
        display: block;

        width: 100px;
        border: 1px solid #76011b;
        border-radius: 8px;
        background: linear-gradient(red, blue); 
        box-shadow: 0px 0px 10px rgba(19,93,158,.6);
        content: "Launch";
    }

/ *这里的内容不适用于firefox * /

    .go:checked:after {
        background: linear-gradient(red, blue); 
        content: "Relaunch";

}

Answer 1

需要添加线性渐变的供应商前缀：

background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */

Answer 2

伪元素：之后和：之前没有处理输入元素（顺便说一下on img元素）。因为，实际上，他们不应该有任何内容。

你必须包装这个输入：

<span class="go"><input type="checkbox"></span>

内容无法在Firefox中运行

2 个答案: