为什么有些按钮元素不显示？答案

【问题标题】：Why are some button elements not displayed?为什么有些按钮元素不显示？
【发布时间】：2021-09-28 12:22:47
【问题描述】：

在 VScode IDE 中，两个“减量”按钮未显示并以黄色突出显示。怎么了？

<!DOCTYPE HTML>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>

  <h1>Increment and Decrement counter</h1>

  <div>

    <button onclick="increment()">+</button>
    <h2 id="counting">h2 tag</h2>
    <button onclick="decrement()">-</button>
    <button onclick="decrement()">-</button>
    <button onclick="decrement()">-</button>
    <button onclick="decrement()">-</button>
    <button onclick="decrement()">-</button>

  </div>

</body>

</html>

【问题讨论】：

我在 Stack 中尝试过作为 sn-p 并且没问题。尝试重启 vsCode
@Dai OP 的问题是Why first and third '-' button does not show as a button in html part
我也试过 vsCode 一切都还好
尝试检查检查元素以了解是否应用了 CSS 属性。或者其他一些 CSS 覆盖它
如果no-break spaces are turned into normal spaces after copy & paste，该问题似乎无法重现。

标签： html visual-studio-code

【解决方案1】：

问题与第一个和第三个“减量”按钮中的NO-BREAK SPACE 字符有关：

（来自https://www.soscisurvey.de/tools/view-chars.php）

我的浏览器会这样解释它们：

<button&nbsp;onclick="decrement()">-
<button onclick="decrement()">-</button>
<button&nbsp;onclick="decrement()">-
<button onclick="decrement()">-</button>
<button onclick="decrement()">-</button>

导致这个无效的结构：

当我用普通空格替换这些字符时，问题就解决了。

之前：

<button onclick="decrement()">-</button>
<button onclick="decrement()">-</button>
<button onclick="decrement()">-</button>
<button onclick="decrement()">-</button>
<button onclick="decrement()">-</button>

之后：

<button onclick="decrement()">-</button>
<button onclick="decrement()">-</button>
<button onclick="decrement()">-</button>
<button onclick="decrement()">-</button>
<button onclick="decrement()">-</button>

另见：
What is this INSANE space character??? (google chrome)

【讨论】：