Edge浏览器自定义开关按钮显示异常求助，Chrome/Firefox正常

Hey there! Let's get that flipswitch working right in Edge. First, to answer your question: modern Chromium-based Edge does support most -webkit- prefix properties (since it shares the same engine as Chrome), but your code has a couple of small issues that are throwing things off, plus we can tweak some properties to be more cross-browser friendly.

Let's break down the problems and fixes: #

• Invalid CSS syntax: In your .flipswitch:not(:indeterminate):after rule, there's a random -webkit- before position: absolute — this is completely invalid and will cause the browser to ignore parts of that style block.
• Over-reliance on prefixed properties: While -webkit- works in Edge, using standard CSS properties alongside prefixed versions ensures better compatibility across all modern browsers.

Here's the corrected CSS code: #

body { 
  font-family: arial; 
} 

.flipswitch { 
  position: relative; 
  background: white; 
  width: 120px; 
  height: 40px; 
  /* Add standard appearance property alongside prefixed versions */
  appearance: none;
  -webkit-appearance: none; 
  -moz-appearance: none; 
  border-radius: 3px; 
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
  outline: none; 
  font-size: 14px; 
  font-family: Trebuchet, Arial, sans-serif; 
  font-weight: bold; 
  cursor: pointer; 
  border: 1px solid #ddd; 
} 

.flipswitch:indeterminate:after { 
  position: absolute; 
  top: 5%; 
  display: block; 
  line-height: 32px; 
  width: 45%; 
  height: 90%; 
  /* Standard box-sizing first, with prefixed fallback */
  box-sizing: border-box;
  -webkit-box-sizing: border-box; 
  text-align: center; 
  color: black; 
  border: #888 1px solid; 
  border-radius: 3px; 
} 

.flipswitch:not(:indeterminate):after { 
  /* Removed the invalid `-webkit-` prefix here */
  position: absolute; 
  top: 5%; 
  display: block; 
  line-height: 32px; 
  width: 45%; 
  height: 90%; 
  box-sizing: border-box;
  -webkit-box-sizing: border-box; 
  text-align: center; 
  /* Add standard transition property alongside prefixed */
  transition: all 0.3s ease-in 0s;
  -webkit-transition: all 0.3s ease-in 0s; 
  color: black; 
  border: #888 1px solid; 
  border-radius: 3px; 
} 

.flipswitch:indeterminate:after { 
  left: 30%; 
  content: "???"; 
  background: grey; 
} 

.flipswitch:not(:indeterminate):after { 
  left: 2%; 
  content: "OFF"; 
  background: #f00; 
} 

.flipswitch:not(:indeterminate):checked:after { 
  left: 53%; 
  content: "ON"; 
  background: #0f0; 
}

Additional Notes: #

• Old EdgeHTML-based Edge: If you still need to support the legacy Edge (pre-Chromium), you'd need to add -ms- prefixes for properties like appearance and transition, but this is rarely necessary these days since most users have switched to Chromium Edge.
• Update Edge: Make sure you're running the latest version of Edge — outdated versions can have random compatibility bugs that get fixed in updates.

Your JavaScript and HTML look fine, so with these CSS fixes, your flipswitch should render exactly the same in Edge as it does in Chrome and Firefox.

内容的提问来源于stack exchange，提问作者Lewis Clarke