Question

IE8中的自定义复选框无法正常工作。我有一个带伪的元素：before，当label-element有类.checked时，它必须更改伪的属性：before。

边框将从红色变为绿色，但图像不会重新定位，只会在单击时重新定位第二次。有点奇怪。

HTML：

<label for="a" class="default-checkbox">
    <input id="a" data-validate="must-check" name="a" type="checkbox">
    SOMETHING BLA BLA
</label>

萨斯：

                .default-checkbox {
                    width: 55%; height: auto;
                    position: relative;
                    text-align: left;
                    padding: 0 20px;
                    margin: 0;
                    line-height: 1.5em;
                    &:before {
                        border: 1px solid red;
                        //content: '\0020';
                        content: '';
                        position: absolute;
                        top: -15px;
                        display: inline-block;
                        width: 47px; height: 44px;
                        left: -20px;
                        background-image: url(../images/default-checkbox.png);
                        background-repeat: no-repeat;
                        background-position: 0 0;
                    }
                    &.checked {
                        &:before {
                            content: '.'; // used a dot to apply the change
                            border: 1px solid green;
                            background-position: 0 -44px;
                        }
                    }

Answer 1

我想我已经找到了这个问题，或者让我说：我在IE8中发现了一个错误。如果我在以下内容中更改内容：''属性：在选中之前，它可以正常工作。因此，content属性必须与.checked en和unchecked state（class）不同。它有效，但真的很奇怪！

IE8背景图像伪

1 个答案: