A+

IE8如何兼容CSS中的选择器:before以及:checked

想做一个像boostrap里面那样的switch开关,但是不希望使用boostrap及jQuery等,只用JavaScript以及css自己做一个,但是在兼容IE8浏览器的时候出现问题,css中的:before以及:checked无法使用。
js部分:
LazyLoad.css("http://%26quot%3B%2BSDMAPConfi ... 6quot;);
var switchDiv=document.createElement("div");
switchDiv.id="PoiSwitch";
switchDiv.style.position = "absolute";
switchDiv.style.right = "160px";
switchDiv.style.top = "14px";
switchDiv.style.zIndex = 999;
var str5="<input class='mui-switch' type='checkbox' checked id='SwitchBotton' data-content='兴趣点'>";
// var str5="<button type='button' class='test test-before' aria-haspopup='true' aria-expanded='false' id='SwitchBotton'>电子地图</button>";
switchDiv.innerHTML=str5;
var poiSwitch=document.getElementById('PoiSwitch');
//兼容IE8浏览器监听事件
if(window.attachEvent){
poiSwitch.attachEvent("onclick",function(){
var bb=document.getElementById('SwitchBotton');
if(bb.checked){
$this.mapArrays.isShowPoi = true;
switchMaps($this.mapArrays.mapNode);
}else{
$this.mapArrays.isShowPoi = false;
switchMaps($this.mapArrays.mapNode);
}
})
}else if(window.addEventListener){
poiSwitch.addEventListener("click",function(){
var bb=document.getElementById('SwitchBotton');
if(bb.checked){
$this.mapArrays.isShowPoi = true;
switchMaps($this.mapArrays.mapNode);
}else{
$this.mapArrays.isShowPoi = false;
switchMaps($this.mapArrays.mapNode);
}
})
}
css部分:
.mui-switch {
  width: 72px;
  height: 27px;
  position: relative;
  border: 1px solid #dfdfdf;
  background-color: #fdfdfd;
  box-shadow: #dfdfdf 0 0 0 0 inset;
  border-radius: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-clip: content-box;
  display: inline-block;
  -webkit-appearance: none;
  user-select: none;
  outline: none;

.mui-switch:before, .mui-switch.before, .mui-switch before {
/* content: '兴趣点';attr(data-content); */
  content: attr(data-content);
  font-size: 12px;
  text-align: center;
  line-height: 2;
  font-family: Trebuchet, Arial, sans-serif;
  width: 50px;
  height: 25px;
  position: absolute;
  top: 0px;
  left: 0;
  border-radius: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

.mui-switch:checked,.mui-switch.checked,.mui-switch checked {
  border-color: #5bc0de;
  box-shadow: #5bc0de 0 0 0 16px inset;
  background-color: #5bc0de;

.mui-switch:checked:before, .mui-switch checked before {
  left: 20px;
}
找了网上的相似例子,但是并不能实现
var $beforeAfter = function(dom) {
// if (document.querySelector || !dom && dom.nodeType !== 1) return;
var content = dom.getAttribute("data-content") || '';
var before = document.createElement("before");
// 内部content
before.innerHTML = content;
// 前后分别插入节点
dom.insertBefore(before, dom.firstChild);
};
$beforeAfter(document.getElementById("SwitchBotton"));
附上使用的网上例子,在ie8调试时dom.insertBefore(before, dom.firstChild);
会报错,似乎是ie8无法向input标签中插入一个子标签。
如何用不使用第三方控件来解决它,各路大神给点意见,万分感谢!!!
 
 
 
 
 
 
已邀请:

要回复讨论请先登录注册