Question

我尝试了几次尝试，以使自定义复选框在所有浏览器中看起来都一致。我面临的唯一浏览器是Edge。我正在使用十进制代码作为对勾标记，在所有主要浏览器中均显示为正确。但是对于Edge，我必须更改字体系列，因为Edge浏览器会改用Segoe UI Symbol字体。更改字体时，复选框的外观会发生变化，并且看起来不一致。

尝试运行以下不带字体系列的代码：Segoe UI Symbol;这就是我原始复选框的外观。

label {
  display: inline-block;
  max-width: 100%;
}

input[type='checkbox'] {
  display: none;
  box-sizing: border-box;
  padding: 0;
  outline: none;
  border: none;
  background: transparent;
  width: auto;
}

input[type='checkbox']:checked+.tick_mark {
  color: #16a0de;
}

input[type='checkbox']+span {
  cursor: pointer;
  font-weight: normal;
  font-size: 11px;
}

.tick_mark {
  border: 1px solid #666;
  padding: 0px 1px;
  color: white;
  margin: 6px 4px 6px 0;
  font-weight: normal;
  font-family: Segoe UI Symbol;
}

<label>
  <input name="postSelected" class="NonUnSaved" id="chkBlog" type="checkbox" value="4">
  <span class="tick_mark">&#10004;</span>
  <span class="btntooltip" data-val="checkboxTest">Text 1</span>
</label>

Answer 1

尝试一下。

label {
  display: inline-block;
  max-width: 100%;
}

input[type='checkbox'] {
  display: none;
  box-sizing: border-box;
  padding: 0;
  outline: none;
  border: none;
  background: transparent;
  width: auto;
}

input[type='checkbox']:checked+.tick_mark {
  color: #16a0de;
}

input[type='checkbox']+span {
  cursor: pointer;
  font-weight: normal;
  font-size: 11px;
}

.tick_mark {
  padding: 0px 1px;
  color: white;
  margin: 6px 4px 6px 0;
  font-weight: normal;
  font-family: Segoe UI Symbol;
  position: relative;
}
input[type='checkbox'] + .tick_mark:before {
    content: '\a0';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    border: 1px solid #222;
    margin-right: 0.25em;
    line-height: 1;
    position: absolute;
    top: 1px;
    left: -2px;
}

<label>
  <input name="postSelected" class="NonUnSaved" id="chkBlog" type="checkbox" value="4">
  <span class="tick_mark">&#10004;</span>
  <span class="btntooltip" data-val="checkboxTest">Text 1</span>
</label>

Answer 2

我认为最简单的方法是尝试填充。这样可以在Edge中获得更好的正方形：

.tick_mark {
    ...
    padding: 0px 2px;
    ...
}

您将不得不搜索如何仅将不同的CSS应用于Edge，但我认为仍然可行。

您可能无法使它们完全相同，但非常接近。

边缘浏览器上的自定义复选框打勾不一致

2 个答案: