IE11 Does Not Apply Style When Including Colons in Attribute Selector

Asked 1 months ago, Updated 1 months ago, 5 views

I would like to specify the following in the attribute selector, but IE11 does not work well.
Edge (Chronium) works properly.

After trying various things, it seems that the colon (:) or later has a string that does not match.

  • font-size:...OK
  • font-size:50...NG

I thought I needed to escape a colon (:), so I tried \\:, \:, :, and so on, but it didn't work.
I think it's an IE11 bug, but does anyone know the workaround?

<html>
<style>
  input [ style*="font-size:50px" ] {
    letter-spacing: 50px;
  }
</style>

<body>
  <input type=text style="font-size:50px;"value="12345678">
</body>
</html>

css internet-explorer

2022-09-30 14:18

1 Answers

The [att*=val] attribute selector has the att attribute and matches an element whose value contains a substring val [1].In other words, this selector does nothing if the fraction does not exist.

[1]

6.3.2.Substring matching attribute selectors[1]

[1]
  • [att*=val]
    Represents an element with the attribute which contains at least one instance of the substring "val".If "val" is the empty string then the selector does not present anything.

In this case, the [style*="font-size:50px"] attribute selector is not working because Internet Explorer has shaped the CSS for the style attribute and a blank character is inserted immediately after the colon.You can solve the problem by using a different selector or by listing the attribute selectors you want to match as follows:

<!DOCTYPE html>
<html>

<head>
  <metacharset="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>


2022-09-30 14:18

If you have any answers or tips


© 2022 OneMinuteCode. All rights reserved.