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

Question

我在Windows chrome中只有一个奇怪的行为。复选框中的此检查在后选择器中呈现为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;以强制跨度显示为块