复选框内容 IE 11/Edge答案

【问题标题】：Checkbox content IE 11/Edge复选框内容 IE 11/Edge
【发布时间】：2016-07-09 07:17:02
【问题描述】：

我在 IE 和 Edge 中遇到了checkbox 的问题，即“内容”类。我有以下代码：

<input id="checkbox" type="checkbox" class="checkbox-edit-article" name="breakingNews" ng-model="showPublished" ng-change="updateCategory(selectedCategory, pageID)">
    <label for="checkbox" class="checkbox-edit-article-label">
        Show only published articles
    </label>
</input>

当字段被选中时

.checkbox-edit-article:checked + .checkbox-edit-article-label:before {
    content: url(../img/mark-white.png);
    background: rgb(49,119,61);
    color: #fff;
    height: 44px;
    line-height: 2.4;
    transition: all .2s;
}

和静态的

.checkbox-edit-article + .checkbox-edit-article-label:before {
    content: '';
    background: #fff;
    border: 1px solid #BFBFBF;
    display: inline-block;
    vertical-align: middle;
    width: 43px;
    height: 44px;
    margin-right: 10px;
    margin-top: 1px;
    text-align: center;
    box-shadow: inset 0px 0px 0px 1px white;
}

在 Chrome 中content: url(../img/mark-white.png); 显示完美，但在 IE 中由于line-height 导致此检查图像太高，但我不知道如何使复选框中的图片居中。

请教各位大神，如何对齐图片？

提前谢谢你！

【问题讨论】：

你能给我们足够的信息来重现这个问题吗？也许是一个工作小提琴，这些图像是什么样的？

标签： html css checkbox internet-explorer-11 microsoft-edge

【解决方案1】：

你把你的图片放在background，就像这样

background: rgb(49,119,61) url(../img/mark-white.png) no-repeat center center;

示例 sn-p

.checkbox-edit-article:checked + .checkbox-edit-article-label:before {
  content: '';
  background: rgb(49,119,61) url(http://i.stack.imgur.com/NOQI7.png) no-repeat center center;
  background-size: 25px 25px;  /* this I just added to make my bigger mark be small */
  color: #fff;
  height: 44px;
  transition: all .2s;
}
.checkbox-edit-article + .checkbox-edit-article-label:before {
  content: '';
  background: #fff;
  border: 1px solid #BFBFBF;
  display: inline-block;
  vertical-align: middle;
  width: 43px;
  height: 44px;
  margin-right: 10px;
  margin-top: 1px;
  text-align: center;
  box-shadow: inset 0px 0px 0px 1px white;
}

<input id="checkbox" type="checkbox" class="checkbox-edit-article" name="breakingNews" ng-model="showPublished" ng-change="updateCategory(selectedCategory, pageID)">
<label for="checkbox" class="checkbox-edit-article-label">Show only published articles</label>

【讨论】：