Do not set invalid style

[ahocevar]

We need to use block display for measuring text heights.

Fixes #12213.

[MoonE]

The current version did not werk because !important is not allowed for styles set directly on an element. Which means all the styles set here did not have any effect.
The patch below should work, margin seems to have no effect on offsetHeight, though border does. left is not needed if the div is removed.

diff --git a/src/ol/render/canvas.js b/src/ol/render/canvas.js
index 61780050a..e5f793324 100644
--- a/src/ol/render/canvas.js
+++ b/src/ol/render/canvas.js
@@ -306,10 +306,10 @@ export const measureTextHeight = (function () {
         if (!div) {
           div = document.createElement('div');
           div.innerHTML = 'M';
-          div.style.margin = '0 !important';
-          div.style.padding = '0 !important';
-          div.style.position = 'absolute !important';
-          div.style.left = '-99999px !important';
+          div.style.padding = '0';
+          div.style.border = 'none';
+          div.style.position = 'absolute';
         }
         div.style.font = fontSpec;
         document.body.appendChild(div);

[ahocevar]

Wow, good find, @MoonE. You're absolutely right, I just force-pushed a commit with your suggestion, and it works indeed.

[MoonE]

The pushed commit isn't quite my suggestion.
Margin can be removed and left can be removed, but border could be added in case it was set by a user style sheet.
See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth

Anyway, to be extra sure, it might as well be

diff --git a/src/ol/render/canvas.js b/src/ol/render/canvas.js
index 61780050a..3d5ea7a0e 100644
--- a/src/ol/render/canvas.js
+++ b/src/ol/render/canvas.js
@@ -306,10 +306,13 @@ export const measureTextHeight = (function () {
         if (!div) {
           div = document.createElement('div');
           div.innerHTML = 'M';
-          div.style.margin = '0 !important';
-          div.style.padding = '0 !important';
-          div.style.position = 'absolute !important';
-          div.style.left = '-99999px !important';
+          div.style.minHeight = '0';
+          div.style.maxHeight = 'none';
+          div.style.height = 'auto';
+          div.style.padding = '0';
+          div.style.border = 'none';
+          div.style.position = 'absolute';
+          div.style.display = 'block';
         }
         div.style.font = fontSpec;
         document.body.appendChild(div);

Might be hyper correct now.
Styles only need to be reset in case the user overides them in a style sheet, normally you wouldn't set these with a super general rule, but who knows...

[ahocevar]

left was added intentionally to render the element outside the visible viewport. Feel free to modify my branch directly. Thanks!

[ahocevar]

Thanks, looks good to me now. Do you agree, @MoonE ?