noscript tag isn't working on internet explorer

Question

I have a website with the

Answer 1

Even I have encountered this, so after a lot of struggles, I have devised a trick that works fine. Instead of styling the noscript tag, cover the element to be shown when javascript is disabled in a div and then display none that div using javascript. Hence, when javascript is disabled the viewer shall see the div you intended them to see, but if javascript is enabled the div will be styled as display none by the scrip you wrote making it not visible.

See below an example:

Normally we do this:

• html: <noscript> please enable javascript ... </noscript>
• css: noscript{background-color: red; color: white; font-size: 24px; ... }

---

Instead do this:

• html: <div class="noscript"> please enable javascript </div>
• css: .noscript{background-color: red; color: white; font-size: 24px; ... }
• js: const noscript = document.querySelector('.noscript').style.display="none";

Answer 2

Encountered this issue as well. I had this working in IE and then it stopped all of a sudden. What I found is that if your css is nested beneath a noscript tag in your actual css definition it will not work. If you use just a class name its fine.

I'm using IE 10 to test with and their dev tools to change the document mode to older browser modes to verify. Results may vary when actually using older browsers. Report back if this is the case.

Example html:

<noscript>
    <div class="noscript">
        JavaScript must be enabled ...
    </div>
</noscript>

Doesn't Work:

// classes nested beneath a noscript tag are not applied by IE
noscript div.noscript {
        display: block;
        text-align: center;
        color: white;
        font-weight: 700;
        background: #D53333;
        margin: 0 auto;
        padding: 4px;
    }

Does work:

div.noscript {
    display: block;
    text-align: center;
    color: white;
    font-weight: 700;
    background: #D53333;
    margin: 0 auto;
    padding: 4px;
}

Answer 3

try this css

.noscript {
   background: red;
   top: 100px; 
   color: #fff;
   padding: 10px;
   text-align: center;
   position: relative;
   z-index: 3;
}