

属性セレクタで以下のように指定したいのですが、IE11ではうまく動作しません。  
Edge(Chronium)は正しく動作します。

いろいろ試してみるとコロン（`:`）以降に文字列が入ったところで一致しなくなるようです。

  * `font-size:`...OK
  * `font-size:50`...NG

コロン（`:`）をエスケープする必要があるのかと思い、`\\:`、`\:`や`&#058;`などを試しましたが動作しません。  
IE11のバグだとは思うのですが、どなたか回避策をご存じないでしょうか？

[code]

    <html>
    <style>
      input[style*="font-size:50px"] {
        letter-spacing: 50px;
      }
    </style>
    
    <body>
      <input type=text style="font-size:50px;" value="12345678">
    </body>
    </html>
[/code]


CC BY-SA 4.0
2020-08-31T08:31:13.383
70012
2020-09-02T12:59:22.283
2020-09-02T12:59:22.283
32986
41714
question
css internet-explorer
IE11で属性セレクタにコロンを含むときスタイルが適用されない


`[att*=val]` 属性選択子は `att` 属性があり、その値に部分列 `val`
が含まれている要素にマッチします[[1]](https://drafts.csswg.org/selectors-3/#attribute-
substrings)。つまり、当該部分列が存在しない場合はこの選択子は何もしません。

> ### 6.3.2. Substring matching attribute
> selectors[[1]](https://drafts.csswg.org/selectors-3/#attribute-substrings)
>
>   * `[att*=val]`  
>  Represents an element with the att attribute whose value contains at least
> one instance of the substring "val". If "val" is the empty string then the
> selector does not represent anything.
>

今回の場合、 Internet Explorer が `style` 属性の CSS を整形しており、 **コロンの直後に空白文字が挿入される** ため、
`[style*="font-size:50px"]`
属性選択子が機能していません。別の選択子を用いるか、次のようにマッチさせたい属性選択子を列記することで問題を解決することが出来ます。

[code]

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <style>
        input[style*="font-size: 50px;"],
        input[style*="font-size:50px;"] {
          letter-spacing: 50px;
        }
      </style>
    </head>
    
    <body>
      <input type=text style="font-size:50px;" value="12345678">
    </body>
    
    </html>
[/code]


CC BY-SA 4.0
2020-08-31T10:08:33.337
70018
2020-08-31T10:08:33.337
32986
70012
answer