Кнопка не отображается должным образом на краю

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

Я не думаю, что край использует префикс -webkit-.Если я правильно помню, чтобы поддерживать Edge, вам нужно что-то вроде этого:

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

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

Что является префиксом -ms- для Internet Explorer и Microsoft Edge.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-внешний вид уже работает для края: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

Там будет проблема в вашем CSS где-то еще.В настоящее время у меня нет времени, чтобы полностью настроить ваш код в соответствии с вашими потребностями (работа и прочее ...), но у меня есть рабочий пример, который работает на грани: https://codepen.io/mrdeadsven/pen/KewdgE Вы, вероятно, можете настроить youtкод к чему-то похожему.