缩小Chrome时，CheckBox不会显示

Question

使用Chrome并缩小至75％或更低时，复选框无法正常显示。 我也在使用AngularJS最新版本。 在FireFox和Internet Explorer中，它们正确显示。

我尝试用以下方法解决此问题：

input[type=checkbox] {
    -webkit-appearance:checkbox;
}

但这没有用。

这是它的样子：

复选框是自定义的，有1个跨度和2个div。 这是代码：

 .ckeckmark { display: inline-block; width: 18px; height: 18px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); }` .ckeckmark > .stem { position: absolute; width: 1px; height: 11px; background-color: #1C4A9E; left: 8px; top: 2px; } .ckeckmark > .kick { position: absolute; width: 5px; height: 1px; background-color: #1C4A9E; left: 3px; top: 12px; } 

 <span ng-class="{ckeckmark: resident}"> <div class="stem"></div> <div class="kick"></div> </span> 

.stem和.kick是.checkmark span class中彼此.kick的2个div。

经过研究后，我发现谷歌浏览器在100％变焦（及以上）时显示网页确定，但当缩放级别低于100％（例如90％）时，填充变更。 A从屏幕的右侧移动到左侧。 任何帮助/建议？

Answer 1

所以我把它变成了小提琴，我想我看到了你的问题。 在jsfiddle的复选标记消失之前，缩小到33％，而不是75％。

我使用的解决方案是在实际的干和踢上使用边框，而不是在这些元素上使用背景。

.ckeckmark { 
  display: inline-block; 
  width: 18px; 
  height: 18px;
  border: 1px solid black;
  -ms-transform: rotate(45deg); 
  -webkit-transform: rotate(45deg);
}
.stem { 
  position: absolute; 
  width: 1px; 
  height: 11px; 
  border-left: 1px solid red; 
  left: 8px; 
  top: 2px; 
} 
.kick {
  position: absolute; 
  width: 5px; 
  height: 7px; 
  border-top: 1px solid red; 
  left: 3px; 
  top: 12px;
}

我没有在其他浏览器中测试过这个，但我一直缩小到25％，我仍然看到了复选标记。

在这里小提琴： http ： //jsfiddle.net/Lvc0u55v/1658/