项目中改bug时发现的伪元素的坑。
谷歌下效果
火狐下效果
一开始以为是
border-radius在火狐中需要前缀-moz-border-radius实际测试时发现火狐是可以支持border-radius的，于是我就有点搞不懂了，在浏览器上查了半天。
火狐下伪元素样式
突然发现在火狐下伪元素并没有实际生效，又寻找了半天找到了原因。
伪元素不支持空元素。
1. 什么是伪元素呢？
伪元素用于向某些选择器设置特殊效果。表示了某个元素的子元素。伪元素也就是假的元素，在实际DOM树中并不存在，所以也不能用js找到元素，绑定事件等，但是可以添加样式。
2. 伪元素的坑
空元素（不能包含内容的元素）不支持::before,::after
比如input，select，img，textarea
解决办法
将伪元素用在非空元素上，比如div，然后就可以了。
修改伪元素
//input按钮同时绑定的事件
// $('.gmi-switch').on('click', function (e) {
// var isChecked = $(this).prop('checked');
// $(this).prop('checked', isChecked);
// if ($(this).prop('checked')) {
// $('.mg-payment-cells--vcode').slideDown();
// } else {
// $('.mg-payment-cells--vcode').slideUp();
// }
// });
$('.gmi-switch').on('click', function (e) {
//修改checked为模拟
$(this).toggleClass('checked');
if ($(this).hasClass('checked')){
$('.mg-payment-cells--vcode').slideDown();
} else {
$('.mg-payment-cells--vcode').slideUp();
}
});
