IE11 ignores font-size inherit in compability mode

StackOverflow https://stackoverflow.com/questions/22629324

  •  20-06-2023
  •  | 
  •  

Question

Consider this code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS test</title>
        <style>
            body {
                font-size: 14px;
            }
            h4 {
                font-size: 1.4em;
            }
            .title {
                font-size: inherit;
            }
        </style>
    </head>
    <body>
        <div>
            <h4>The first header</h4>
            <p>Some text...</p>
        </div>
        <div>
            <h4 class="title">The second header</h4>
            <p>Some more text2...</p>
        </div>
    </body>
</html>

Running this in IE11 (or any other modern browser) will render the second header in the same size as the paragraph text, because of "font-size: inherit" that is applied to the "title" class.

However, if I run the same code in IE11 in compability mode, the second header is rendered in the same size as the first header. "font-size: inherit" seems to be ignored.

Why does IE11 behave like this in compability mode? Is this expected behavior?

Was it helpful?

Solution

Compatibility View is an emulation of IE7, which does not support the inherit keyword (with a few obscure exceptions). Proper support for inherit was only introduced in IE8, and to ensure the accuracy of IE7 emulation, this full support is not made available in Compatibility View.

So yes, this is expected behavior.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top