That’s not because of the browser. That’s because some unicode characters have their own style. You need to change their colors using options rather than color property.
<h1>The span element</h1>
<p>This is blue:<span class="blue-emoji">🛑</span> and this is blue <span style="color:blue;">BLUE</span>.</p>
Problem :
Firefox Browser (Mozilla Firefox for Ubuntu canonical=1.0) 76.0.1 (64-bit), this simple code delivers wrong result:
Expected: both elements in blue color
Actually: 🛑 in red color, ‘BLUE’ in blue color
Code:
<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>This is blue:<span style="color:blue;">🛑</span> and this is blue <span style="color:blue;">BLUE</span>.</p>
</body>
</html>
Google Chrome and Chromium Web Browser behave as expected and it’s not an emoji. Any idea what is going wrong here? Thnx, hry.
Comments
Comment posted by harry hartmann
Google Chrome and Chromium Web Browser behave as expected. (It’s not an emoji)
Comment posted by harry hartmann
so I mean it is Firefox specific.
Comment posted by Alireza HI
I tried it on chrome and it was
Comment posted by harry hartmann
Google Chrome Version 81.0.4044.138 (Official Build) (64-bit) is green, Chromium Version 81.0.4044.138 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit) as well (green).
Comment posted by T.J. Crowder
@HRY – It’s not Firefox-specific, it’s specific to anything that supports that emoji, which has its own in-built color and can’t be styled in the usual way. Firefox does. Chrome doesn’t (at least not on my Linux and Windows systems). Since they don’t support that emoji, they show the usual “unknown character” glyph, which can be styled in the normal way.
