更改 ::之前 Edge 中的伪样式不会按预期重新绘制视觉更新

Question

我在MS Edge上遇到了一个奇怪的问题，希望有人有见解或解决方案。

我是使用 JS 更改 <div> 元素的类名以在单击时应用新样式。

div elem 具有使用::before选择器的默认样式。

单击时应用的样式使用具有不同content属性的::before伪选择器。

我看到的问题是MS Edge不会始终如一地更新/重新绘制显示以反映与content属性应用的样式。我希望0在下面的示例中每次后续单击时都更改为X并再次返回。

我在这里创建了一个简单的例子：https://jsfiddle.net/s4bs81of/7/

var classActive = false;
function AddClass(Elem, className) {
  if (Elem) {
    if (!Elem.classList) {
      var Classes = className.split(' ');
      for (var i = 0; i < Classes.length; i++) {
        if (Classes[i] != '') {
          if (!Elem.className.match(new RegExp('(\s|^)' + Classes[i] + '(\s|$)'))) {
            Elem.className += ' ' + Classes[i];
          }
        }
      }
    } else {
      if (className != '') {
        Elem.classList.add(className);
      }
    }
  }
}
function RemoveClass(Elem, className) {
  if (Elem) {
    if (!Elem.classList) {
      if (Elem.className) {
        var Classes = className.split(' ');
        for (var i = 0; i < Classes.length; i++) {
          if (Classes[i] != '') {
            var Reg = new RegExp('(\s|^)' + Classes[i] + '(\s|$)');
            Elem.className = Elem.className.replace(Reg, '');
          }
        }
      }
    } else {
      if (Elem.classList.contains(className) && className != '') {
        Elem.classList.remove(className);
      }
    }
  }
}
function clickChangeClass() {
  var Elem;
  if (Elem = document.getElementById('elemId')) {
    if (classActive) {
      RemoveClass(Elem, 'JourneySelected');
      AddClass(Elem, 'Journey');
    } else {
      AddClass(Elem, 'JourneySelected');
      RemoveClass(Elem, 'Journey');
    }
    classActive = !classActive;
  }
}
if (Elem = document.getElementById('elemId')) {
  Elem.onclick = clickChangeClass;
}

body {
  font-family: sans-serif;
}
#elemId {}
.JourneyContainer {
  height: 50px;
  width: 150px;
  background: #FDFDFD;
  border: 1px solid #000;
  position: relative;
  display: table;
  width: 100%;
}
.JourneyContainer::before {
  content: "";
  top: 50%;
  left: 10px;
  position: absolute;
  font-size: 16px;
}
.Journey {
  background: green;
}
.JourneySelected {
  background: red;
}
.Journey::before {
  content: "0";
}
.JourneySelected::before {
  content: "X";
}

<div id="elemId" class="JourneyContainer Journey"></div>

Answer 1

我不知道

为什么 Edge 会这样做，但它归结为display类型。将其从table更改为block，浏览器将正确重绘：

var classActive = false;
function AddClass(Elem, className) {
  if (Elem) {
    if (!Elem.classList) {
      var Classes = className.split(' ');
      for (var i = 0; i < Classes.length; i++) {
        if (Classes[i] != '') {
          if (!Elem.className.match(new RegExp('(\s|^)' + Classes[i] + '(\s|$)'))) {
            Elem.className += ' ' + Classes[i];
          }
        }
      }
    } else {
      if (className != '') {
        Elem.classList.add(className);
      }
    }
  }
}
function RemoveClass(Elem, className) {
  if (Elem) {
    if (!Elem.classList) {
      if (Elem.className) {
        var Classes = className.split(' ');
        for (var i = 0; i < Classes.length; i++) {
          if (Classes[i] != '') {
            var Reg = new RegExp('(\s|^)' + Classes[i] + '(\s|$)');
            Elem.className = Elem.className.replace(Reg, '');
          }
        }
      }
    } else {
      if (Elem.classList.contains(className) && className != '') {
        Elem.classList.remove(className);
      }
    }
  }
}
function clickChangeClass() {
  var Elem;
  if (Elem = document.getElementById('elemId')) {
    if (classActive) {
      RemoveClass(Elem, 'JourneySelected');
      AddClass(Elem, 'Journey');
    } else {
      AddClass(Elem, 'JourneySelected');
      RemoveClass(Elem, 'Journey');
    }
    classActive = !classActive;
  }
}
if (Elem = document.getElementById('elemId')) {
  Elem.onclick = clickChangeClass;
}

body {
  font-family: sans-serif;
}
#elemId {}
.JourneyContainer {
  height: 50px;
  width: 150px;
  background: #FDFDFD;
  border: 1px solid #000;
  position: relative;
  display: block;
  width: 100%;
}
.JourneyContainer::before {
  content: "";
  top: 50%;
  left: 10px;
  position: absolute;
  font-size: 16px;
}
.Journey {
  background: green;
}
.JourneySelected {
  background: red;
}
.Journey::before {
  content: "0";
}
.JourneySelected::before {
  content: "X";
}

<div id="elemId" class="JourneyContainer Journey"></div>