文本转换大写css无法正常工作

Question

在我的react项目中尝试使用“文本变换：大写” css设置导航元素样式时，我注意到一个非常奇怪的问题。看来，React只将样式应用于第一个锚标记，而忽略其余样式。但是，将值设置为“小写”或“大写”时，一切都可以正常工作。

这是已知错误还是故意的？

这是演示问题的codepen

Answer 1

更新资料

（以及正确答案-该行下面的内容仅供参考，为Chromium论坛上的讨论提供了背景信息，因为此问题最初是作为浏览器错误发布的）。

尽管它看起来像个错误，但实现是正确的。这是一个功能。简而言之，任何display:inline元素都是文档流程中的“字母”。如果您决定在字母之间text-transform:capitalize不留任何空格（或任何可能解释为空格的空格），则应仅将“单词”中的第一个字母大写。

要解决此问题，请给您链接display:inline-block或添加一个伪（:before或:after）display:inline-block;content:'';

以前的更新：

TL，DR；

nav a:before {
  content: '?'; /* copy-paste a zero-width-space (​) character */
}

...或者只是在锚文本前面加上前缀​似乎可以解决此问题。
但是，要清楚一点，以上内容是一个hack。解决方法。

另一个解决方法是将nav a的display属性设置为inline，但默认值除外-是的，也进行了display:none;修复。为了好！？...
...这导致了第三个选项，甚至更少侵入性和不需要字符打难GET：

nav a:before {
  content: ''; /* empty string, no specials here */
  display: inline-block;
}

如果用于nav a:after，也可以使用（如果需要）:before。解决该问题的方法是中断inline生产线的连续流动。

更新的答案：

看来您发现自己是一个bug，Chrome和Firefox当前都存在该bug。我尚未测试其他浏览器，但是希望在其他基于Webkit的浏览器（Safari，Edge，Opera）中体验到这一点。我已经用Chromium提交了该错误，很可能会在Chrome中以及不久之后在Firefox中对其进行修复。

正如您在添加mcve之前所怀疑的那样，它与React无关。我可以在这里使用简单的标记来复制它：

nav a:before {
  content: '?'; /* copy-paste a zero-width-space (​) character */
}

nav a:before {
  content: ''; /* empty string, no specials here */
  display: inline-block;
}

最奇怪的事情是...如果将每个元素放在不同的行上（在标记中），它将开始正常工作，而无需进行其他任何更改。

nav a {
   margin: 1em;
   text-transform: capitalize;
}

<div><nav><a href="/">home</a><a href="/2">page 2</a><a href="/3">page 3</a></nav><div>

这导致我尝试​在每个锚点的开头添加零宽度空间，这显然也解决了该问题：

nav a {
   margin: 1em;
   text-transform: capitalize;
}

<div><nav><a href="/">home</a>
<a href="/2">page 2</a>
<a href="/3">page 3</a></nav><div>

要将修复程序应用于您的示例，请将此行放在您的之前<nav>：

<style>nav a:before{'{'}content:'&#8203;'{'}'}</style>

但仍然是Chrome中的一个常设错误，应在其论坛上进行报告（并已修复）。

初始答案（在查看示例之前）

React是JavaScript。

text-transform: capitalize;

...是CSS。如果由React处理，则在放置标记之前，文本将已经转换。重点text-transform是使文本在标记中保持不变，并（通过浏览器）呈现。

因此，您的问题并不是真正的错误，并且与React无关。这与您的浏览器尚未实现有关text-transform:capitalize。还是没有正确应用。

请在此处和此处查看兼容性表。不幸的是，很难（除了亲自尝试之外）确定浏览器是否支持部分受支持属性的特定值。

在浏览器支持之前，您必须使用React（或vanilla）或您选择的库（即lodash具有_.capitalize（））将文本大写。

这个简单的示例将告诉您当前的浏览器是否支持它：

nav a {
  margin: 1em;
  text-transform: capitalize;
}
nav a:before {
  content: '?';
}

<div><nav><a href="/">home</a><a href="/2">page 2</a><a href="/3">page 3</a></nav><div>

在不支持CSS的浏览器中“修复”此问题的唯一方法capitalize是定义自己的函数：

capitalize(string) {
  return string.toLowerCase().replace(/(^|\s)\S/g, l => l.toUpperCase())
}

测试：

<style>nav a:before{'{'}content:'&#8203;'{'}'}</style>

text-transform: capitalize;