选择器宽度高度自动设置为 0px 后仅 windows chrome

Question

我只在 windows chrome 中遇到了奇怪的行为。复选框中的此检查在 after 选择器中呈现为 0px x 0px。如果我尝试强制宽度和高度，我仍然会遇到同样的问题。

它呈现的所有其他浏览器都是这样

任何帮助将不胜感激。

<label class="checkbox ng-isolate-scope ng-valid" ng-model="result.selected">
  <span class="checkbox-styled-container">
    <input type="checkbox" class="checkbox-styled-inverted ng-valid ng-dirty ng-valid-parse ng-touched" ng-model="ngModel" style="">
    <span></span>
  </span>
</label>

.checkbox-styled:checked + span:after, .checkbox-styled-container input[type='checkbox']:checked + span:after {
    content: '';
    position: absolute;
    width: 12px;
    height: 7px;
    top: 4px;
    left: 3px;
    border: 3px solid #fff;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

Answer 1

它是一个跨度，所以它有一个默认的display:inline; 尝试在css类中添加display:block;强制span显示为块