html - 为什么这种编码在 IE 中不能正常工作?
问题描述
此代码在 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>
解决方案
该问题与过滤器属性有关,Internet Explorer 11 不支持,您可以检查CSS 过滤器属性。
作为替代解决方法,您可以尝试使用以下代码:
<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>
结果如下:
推荐阅读
- html - 这些图像没有响应他们的点击?
- javascript - 如何将 Chrome 控制台中的 Send TypeErros 发送到警报
- html - 以最大高度显示图像而不进行裁剪或拉伸等
- ios - 更改菜单按钮中的字体 (SwiftUI)
- boto3 - Boto3 Cloudwatch 警报创建新实例
- mongodb - $match 中的 Mongo 聚合条件查询
- asp.net - 为什么 Visual Studio 测试任务无法在 Azure DevOps 中创建代码覆盖率?
- fullcalendar - Fullcalendar 防止 eventDidMount 在拖动时持续触发
- python - Selenium webdriver 阻止了 Cloudflare。Python
- go - Golang Switch i.(type) 返回与 reflect.TypeOf() 不同的类型