我在 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<,此检查图像太高了
,但是我不知道如何让图片在复选框中居中。
我请求你的帮助,我怎样才能对齐图像?
提前致谢!
最佳答案
你把你的图像放在 background
中,像这样
background: rgb(49,119,61) url(../img/mark-white.png) no-repeat center center;
示例片段
.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>
关于html - 复选框内容 IE 11/Edge,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38083832/