缩小Chrome时，CheckBox不会显示

Question

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

我尝试用以下方法修复此问题：

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

但这没有帮助。

以下是它的样子：

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

经过研究后，我注意到Google Chrome在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/