Question

只是想知道为什么这没有预期的行为？它适用于Chrome和Firefox。不确定发生了什么。我试图研究这个，但我真的不知道从哪里开始。边缘是否使用-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-前缀。如果我没记错，你需要这样的东西：

    /* 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 您可以将代码调整为类似的东西。

按钮在边缘上无法正常显示

1 个答案: