Question

此代码在Chrome中正常运行，但是如果我在Internet Explorer 11版本中运行此代码，则无法正常工作。

我需要Internet Explorer 11上的otuput

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}

.cc-selector-2 input{
    position:absolute;
    z-index:999;
}

.visa{background-image:url(s1.jpg);}
.mastercard{background-image:url(s3.jpg);}

.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:70px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
    filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
    -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
    filter: brightness(1.2) grayscale(.5) opacity(.9);
}

/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}

<form>
  <div class="cc-selector">
      <input id="visa" type="radio" name="credit-card" value="visa" />
      <label class="drinkcard-cc visa" for="visa"></label>
      <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
      <label class="drinkcard-cc mastercard"for="mastercard"></label>
  </div>
</form>

Answer 1

该问题与过滤器属性有关，Internet Explorer 11不支持此问题，您可以检查CSS filter Property。

作为替代解决方法，您可以尝试使用以下代码：

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #visa,#mastercard {
            display: none;
        }
            #visa + label > img {
                background-image: url(../Images/Image1.jpg);
                width: 500px;
                height: 300px;
                border: none;
                color: white;
                text-align: center;
                font-size: 16px;
                opacity: 0.2;
                transition: 0.3s;
            }
            #mastercard + label > img {
                background-image: url(../Images/Image2.jpg);
                width: 500px;
                height: 300px;
                border: none;
                color: white;
                text-align: center;
                font-size: 16px;
                opacity: 0.2;
                transition: 0.3s;
            }
                #visa + label > img:hover, #mastercard + label > img:hover {
                    opacity: 1
                }
            #visa:checked + label > img, #mastercard:checked + label > img {
                opacity: 1
            }
    </style>
</head>
<body>
    <input type="checkbox" id="visa" />
    <label class="drinkcard-cc visa" for="visa"><img src="" id="lbl_visa" /></label>
    <input type="checkbox" id="mastercard" />
    <label class="drinkcard-cc mastercard" for="mastercard"><img src="" id="lbl_mastercard" /></label>
</body>

结果如下：

为什么此编码在IE中无法正常工作？

1 个答案: