在 Chrome 上缩小时不显示复选框

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 类中是两个相邻的 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/