按钮无法在边缘正确显示

Question

只是想知道为什么这在边缘没有预期的行为？它在 Chrome 和 Firefox 上工作得很好。不太确定发生了什么。我试图对此进行研究，但我真的不知道从哪里开始。 edge 不使用 -webkit- 前缀吗？正确的行为是您在 Chrome 和 Firefox 上看到的。

var checkbox = document.getElementById("cb4");
checkbox.indeterminate = true;

body {
font-family:arial;
}

.flipswitch {
position: relative;
background: white;
width: 120px;
height: 40px;
-webkit-appearance: initial;
-moz-appearance: initial;
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%;
box-sizing:border-box;
text-align:center;
color:black;
border:#888 1px solid;
border-radius:3px;
}

.flipswitch:not(:indeterminate):after {
-webkit- position:absolute;
top:5%;
display:block; 
line-height:32px;
width:45%;
height:90%;
-webkit-box-sizing:border-box;
text-align:center;
-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;
}

<!--Marketing Emails -->
<div class="form-row">
  <h4>Do you wish to receive Zoek Marketing Emails</h4>
  <p>Emails reminding you to keep your account updated, and to continue your job search with Zoek</p>
  <div>
    <input type="checkbox" id="cb4" class="flipswitch" name="marketing"/>&nbsp;
    <span></span>
  </div>
</div>

大家干杯。

Answer 1

我不认为 edge 使用 -webkit- 前缀。如果我没记错的话，支持 edge 你需要这样的东西：

    /* Microsoft Edge Browser 12+ (All) - @supports method */

@supports (-ms-ime-align:auto) {
  .selector { property:value; } 
}

这是 Internet Explorer 和 Microsoft Edge 的 -ms- 前缀。 https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix

如果您需要有关特定版本的边缘浏览器以及如何支持它们的更多信息，您可以在此处查看：https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/

编辑：正如您在此处看到的那样，-webkit-appearance 已经为 edge 工作： https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

您的 css 其他地方可能会出现问题。目前我没有时间完全调整你的代码以满足你的需要（工作和东西......），但我有一个在边缘工作的工作示例：https://codepen.io/mrdeadsven/pen/KewdgE 您可能可以将您的代码调整为类似的东西。

按钮无法在边缘正确显示

Button not displaying properly on edge

html

javascript

css

cross-browser