自定義複選框有它的postioning抽搐

我已經嘗試過像jQuery和CSS的功能複選框。但是，當點擊複選框時，一些複選框處於抽搐狀態。你可以在here找到jsfiddle，在這裏我已經爲span元素定義了display: inline-block。自定義複選框有它的postioning抽搐

但是，當我定義display: block時，工作正常，我不知道爲什麼那個混亂帶有內聯塊。 JSFiddle鏈接here。

<span name="list4_wrap" id="check4wrap" class=" e-checkwrap"></span> 
#css 
.e-checkwrap { 
     border: 1px solid; 
     height: 14px; 
     width: 14px; 
     display: block; 
     border-color: #c8c8c8; 
     background-color: #fff; 
     cursor: pointer; 
      font-size: 12px; 

    } 
    .e-check-act:before { 
     content: "a"; 
     width: 100%; 
     height: 100%; 
     color: #179bd7; 

     text-indent: 1px; 
    } 
#JS 
$("#check4wrap").click(function(e){ 
    var curEle = e.target.nodeName === "INPUT" ? e.target.parentElement : e.target; 
     if (curEle.className.indexOf("e-check-act") < 0) { 
      curEle.className += " e-check-act";    
     } 
     else { 
      curEle.className = curEle.className.replace("e-check-act", " ");    
     } 
});

請給出一些建議。

來源

2016-02-12 user3468621