css - 代码{字体粗细:bold} not working in mobile-chrome

标签 css mobile-chrome

Mobile-chrome 固执地覆盖了我对 font-weight:bold 的请求。我已经尝试了所有合理的方法,包括通过添加 id 甚至可怕的“!重要”规则来增加“特异性”。没有任何效果。我在我的桌面浏览器上获得了预期的效果,只是在我的 Android HTC One S9 上没有使用 mobile-chrome。

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

一些问题:

  1. 是否有无需修改 html 的纯 CSS 解决方案?

  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>

Here's the actual webpage

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

最佳答案

事实证明,这只是 Chrome for 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>

关于css - 代码{字体粗细:bold} not working in mobile-chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39442587/

相关文章:

javascript - navigator.share 在移动浏览器中不起作用(chrome v64)

php - 如何在通过 php 使用数据库获取的图像之间添加空间

jquery - fancybox 条件宽度取决于它的 "Type"

javascript - 使用javascript的男性女性百分比分布动态图像

android - 移动 Chrome 和高度相关的大小调整和滚动

javascript - parseFloat 不适用于移动设备

javascript - 在移动 Chrome 上隐藏键盘不会改变窗口高度

c# - 如何更改文本框中乌尔都语字符的字体系列

css - 内部服务器错误 500.19::.less mimeMap

ios - SVG 未在 iOS Chrome 和 Safari 上显示?