html - "Táco"比 "Taco"宽。我该如何解决？

Question

我正在尝试在没有变音符号的 div 之上加载带有变音符号的 div。虽然间距不像我那样有效。 (请参阅下面的代码片段。)我该如何解决这个问题？

div.text {
	    width: 75%;
	    position: relative;
	}
	div.diacritics {
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
      z-index: -1;
      color: red;
	}

<div class="text">String String String String String String String String String String
	<div class="diacritics">
  Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng</div>
  </div>

<div class="text">Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco
	<div class="diacritics">
  Táco Táco Táco Táco Táco Táco Táco Táco Táco Táco</div>
  </div>

Answer 1

div.text {
    	    width: 75%;
    	    position: relative;
            font-family: monospace;
    	}
div.diacritics {
    	    width: 100%;
    	    height: 100%;
    	    position: absolute;
    	    top: 0;
    	    left: 0;
            font-family: monospace;
          z-index: -1;
          color: red;
    	}    	

    <div class="text">String String String String String String String String String String
    	<div class="diacritics">
      Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng</div>
      </div>

    <div class="text">Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco
    	<div class="diacritics">
      Táco Táco Táco Táco Táco Táco Táco Táco Táco Táco</div>
      </div>

如果您能够做出权衡，您总是可以尝试使用等宽字体系列。