code{font-weight:bold} 在移动端不工作-chrome

Question

Mobile-chrome 顽固地推翻了我对 font-weight:bold 的要求。我已经尝试了所有合理的方法，包括通过添加 id 甚至可怕的“！重要”规则来增加 "specificity"。没有任何效果。我在我的桌面浏览器上获得了预期的效果，只是在我的 Android HTC One S9 using mobile-chrome.

上没有

理想情况下，我想要一个纯 CSS 解决方案，因为 html 将由另一个程序生成，编写一个正则表达式脚本来处理所有用例会有点乏味，而且我宁愿不必在任何地方添加 <strong> 标签，因为这应该是一个如此简单的 CSS 修复。下面的代码只是更大的网页集合中的一个最小示例。

一些问题：

是否有无需修改 html 的纯 CSS 解决方案？
我在哪里可以找到 mobile-chrome 使用的默认 CSS 样式表？即使我不能修改它，只是看到它可以帮助我想出一些办法。
我承认 Chrome DevTools 界面让我很困惑。我将我的 phone 连接到我的笔记本电脑，确实看到了不需要的输出，但我不知道我应该寻找什么来实际调试问题。感谢任何帮助。

遗憾的是，将一些文字加粗需要3个小时。下面的代码和链接。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS test</title>
    <style type="text/css">
      code {font-weight:bold;}
      code var {font-weight:normal;}
    </style>
  </head>
  <body>
    <code>I want this bold.<br><var>I don't want this bold.</var></code>
  </body>
</html>

Here's the actual webpage

Here's a picture of the mobile view on chrome DevTools showing the problem

Answer 1

事实证明，这只是 Chrome 中 Android 的一个错误。另一个例子见 this question。

如果您需要此功能，请尝试使用 Play 商店中的 "Chrome Beta" 或 "Chrome Dev" 应用程序，因为它们没有问题。

使用以下代码测试：

code {font-weight:bold; font-size:3em;}
code var {font-weight:normal;}

<code>I want this bold.<br><var>I don't want this bold.</var></code>

code{font-weight:bold} 在移动端不工作-chrome

code{font-weight:bold} not working in mobile-chrome

css

mobile-chrome