为什么字母M或W缩进与其他字母不同？

Question

通过这个例子来看:

HTML

<input type="checkbox" name="jour_semaine[]" id="lundi" value="Lundi"/>
<label class="checkbox-inline weekday" for="lundi" >L</label>

<input type="checkbox" name="jour_semaine[]" id="mardi" value="Mardi"/>
<label class="checkbox-inline weekday" for="mardi" >M</label>

<input type="checkbox" name="jour_semaine[]" id="mercredi" value="Mercredi"/>
<label class="checkbox-inline weekday" for="mercredi" >W</label>

<input type="checkbox" name="jour_semaine[]" id="jeudi" value="Jeudi"/>
<label class="checkbox-inline weekday" for="jeudi" >J</label>

<input type="checkbox" name="jour_semaine[]" id="vendredi" value="Vendredi"/>
<label class="checkbox-inline weekday" for="vendredi" >V</label>

CSS

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute!important;
  left: -9999px!important;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 40px;
  padding-top:6px;
  margin-bottom:20px;
  cursor: pointer;
  font-family:'arial';
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 0;
  width: 32px; height: 32px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 3px;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: ' '; 
  background:#ccc;
  width:20px;
  height:20px;
  border-radius:3px;
  position: absolute;
  top: 6px; left: 6px;
  font-size: 24px;
  line-height: 0.8;
  color: #000;
  transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
.checkbox-inline{display:inline-block;}
.weekday{text-indent:-29px; margin-right:60px; font-weight:bold; }
.weekday::before{background:none!important;}
.weekday::after{z-index:-1;}

结果

我正在将这封信压缩到我的框内.如您所见,除了M和W中心之外的所有字母.

我已经尝试了许多font-family,没有,仍然有这个偏移.任何排版大师都可以解释为什么这两个人的行为不同？

请注意,这些都是<label>与text-indent设置为负.

小提琴:https://jsfiddle.net/warface/pLLr8pbq/

Answer 1

除单声道字体外,所有字符都有不同的宽度.

由于您已经在这些框上设置了精确的宽度,因此您可以将标签宽度设置为与框宽度匹配,将文本居中,并删除文本缩进和左边填充,而不是更改缩进.所有字母的对齐问题:

[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-top:6px;
  margin-bottom:20px;
  cursor: pointer;
  font-family:'arial';
  width:32px;
  text-align:center;
}
.weekday{margin-right:60px; font-weight:bold; }

https://jsfiddle.net/pLLr8pbq/3/