3

Mobile-chrome は、font-weight:bold に対する私の要求を執拗にオーバーライドしています。IDを追加して「特異性」を高めたり、恐ろしい「!important」ルールを追加したりするなど、合理的なことはすべて試しました。何も機能していません。mobile-chrome を使用している Android HTC One S9 ではなく、デスクトップ ブラウザーで目的の効果が得られています。

<strong>理想的には、HTML は別のプログラムによって生成されるため、純粋な CSS ソリューションが必要です。また、すべてのユース ケースを処理する正規表現スクリプトを作成するのは少し面倒です。これはとても簡単な CSS 修正のはずです。以下のコードは、はるかに大規模な Web ページのコレクションの最小限のサンプルにすぎません。

いくつかの質問：

  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>

実際のホームページはこちら

問題を示す 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 に答える