html - 在 Chrome 上缩小时不会出现 CheckBox

Question

复选框在使用 Chrome 时显示不正确并且缩小到 75% 或更少。我也在使用 AngularJS 的最新版本。在 FireFox 和 Internet Explorer 中它们会正确显示。

我尝试通过以下方式解决此问题:

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

但这没有帮助。

这是它的样子:

复选框是自定义的，有 1 个 span 和 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 跨度类中彼此相邻的 2 个 div。

经过研究，我注意到谷歌浏览器在 100% 缩放(及以上)时显示网页正常，但当缩放级别小于 100%(例如 90%)时，填充会发生变化。 A 从屏幕右侧移动到左侧。 有什么帮助/建议吗？

Answer 1

所以我把它放入 fiddle 中，我想我看到了你的问题。在 jsfiddle 中复选标记消失之前缩小到 33%，而不是你的 75%。

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

.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%，但我仍然看到复选标记。

在这里 fiddle :http://jsfiddle.net/Lvc0u55v/1658/