Question

Mobile-chrome顽固地覆盖了我对font-weight的请求：粗体。我已经尝试了一切合理的，包括通过添加id甚至可怕的“！important”规则来增加“特异性”。没有任何效果。我在我的桌面浏览器上获得了预期的效果，而不是在使用mobile-chrome的Android HTC One S9上。

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

有些问题：

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

可惜需要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 for Android中的一个错误。有关其他示例，请参阅this question。

如果您需要此功能，请尝试使用Play商店中的“Chrome测试版”或“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>

代码{font-weight：bold}无法在mobile-chrome

1 个答案: