logo标签列表

移动端Chrome浏览器中，code{font-weight:bold}不起作用。

cssmobile-chrome
3

移动版Chrome固执地重写了我对font-weight:bold的请求。我尝试了所有合理的方法，包括添加id甚至可怕的!important规则来增加“特异性”。但是没有什么有效的。在我的桌面浏览器上，我得到了预期的效果，但是在使用移动版Chrome的Android HTC One S9上却没有。

理想情况下，我希望有一个纯CSS解决方案，因为HTML将由另一个程序生成，并且编写正则表达式脚本来处理所有用例会有点繁琐，而且我宁愿不必在这种情况下添加标签。

以下代码只是更大的网页集合的最小示例。

一些问题:

  1. 是否有纯CSS解决方案，其中我不需要修改HTML？

  2. 在哪里可以找到移动版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移动视图的图片展示问题

1个回答
1
这实际上是Chrome for Android的一个bug。请参考this question查看另一个例子。
如果您需要此功能，请尝试使用Play商店中的“Chrome Beta”或“Chrome Dev”应用程序，因为它们不会出现此问题。

Tested with the following code: 

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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接