我想我有一个与 chrome 相关的错误,奇怪的是,它突然发生而没有更改我的代码。我制作了一个脚本,用 jquery cookie 记住选中的复选框值。这可行,但由于某种原因,css 存在问题。在 chrome 中,当我重新加载复选框时,复选框被检查错误,直到我将鼠标悬停在它们上方。我正在使用 Chrome 版本 25.0.1364.45 测试版。我怀疑标签:选择器无法正常工作之后。Safari 或 firefox 没有这种行为。
编辑:好的,我认为这条线出了点问题: input[type=checkbox]:checked + label:after
有人熟悉 chrome 中的 CSS3 选择器问题吗?
CSS:
.selectbox {
position: relative;
display: inline-block;
}
.selectbox input[type="checkbox"] {
visibility: hidden;
}
.selectbox label {
cursor: pointer;
position: absolute;
width: 15px;
height: 15px;
top: 0;
background: #fcfff4;
border: 1px solid #000;
text-indent: 30px;
white-space: nowrap;
font-family: @serif;
font-style: italic;
letter-spacing: 2px;
line-height: 17px;
}
.selectbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 6px;
height: 4px;
background: transparent;
top: 2px;
left: 3px;
border: 2px solid #333;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.selectbox label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.5;
}
.selectbox input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}