3

Mobile-chrome 顽固地压倒了我对 font-weight:bold 的要求。我已经尝试了所有合理的方法，包括通过添加 id 甚至可怕的“！important”规则来增加“特异性”。没有任何效果。我在我的桌面浏览器上得到了想要的效果，只是在我使用 mobile-chrome 的 Android HTC One S9 上没有。

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

一些问题：

  1. 是否有一个纯 CSS 解决方案，我不必修改 html？

  2. 在哪里可以找到 mobile-chrome 使用的默认 CSS 样式表？即使我无法修改它，只要看到它就可以帮助我弄清楚一些事情。

  3. 我承认 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>

这是实际的网页

这是 chrome DevTools 上显示问题的移动视图的图片

4

1 回答 1

1

事实证明，这只是 Chrome for Android 中的一个错误。有关另一个示例，请参见此问题。

如果您需要此功能，请尝试使用 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>

于 2016-09-12T02:49:40.180 回答