How can we make Internet Explorer 11 mimic Internet Explorer 9 in HTML?

How can I ensure that Internet Explorer 11 uses CSS styles from IE9 in my HTML?

I have tried the following code:

<script runat="server">
        private void Page_PreRender(object sender, EventArgs e)
        {
            var meta = new HtmlMeta();
            meta.Content = "IE=EmulateIE9";
            meta.HttpEquiv = "X-UA-Compatible";
            this.Page.Header.Controls.AddAt(0, meta);
        }
</script>

or

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

In order to maintain consistent styles across all versions of Internet Explorer by using IE9 as the standard.

This is the code snippet I am using:

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="~/App_Themes/CocktailSite/master-interno-ie.css" media="screen" />
   <!--[else]>
        <link rel="stylesheet" type="text/css" href="~/App_Themes/CocktailSite/master-interno.css" media="screen" />
<![endif]-->

It works fine on IE9 where it takes master-interno-ie.css, but on IE11 it reverts back to master-interno.css.

I have looked at various answers here but none seem to work in my specific case.

Answer №1

Browsers no longer recognize conditional comments.

Starting with the latest browser versions, conditional comments are no longer acknowledged in standard mode. It is recommended to use feature detection instead to create efficient fallback options for website functionalities that may not be supported by certain browsers.

Answer №2

I managed to solve this with the help of jQuery.

Within my code, right between the scripts and links, I included the following function:

function detectIE() {
    var userAgent = window.navigator.userAgent;
    var index = userAgent.indexOf("MSIE");

    if (index > 0) return true;    
    else if (!!navigator.userAgent.match(/Trident\/7\./)) return true;
    else return false;
}

Following that, I added the code snippet:

if (detectIE()) {
    jQuery('head').append('<link rel="stylesheet" type="text/css"     href="~/App_Themes/CocktailSite/master-interno-ie.css" media="screen" />');
}     

This approach perfectly suits my requirements and has been successfully tested across all versions of Internet Explorer, Google Chrome, and Mozilla Firefox.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I update two divs simultaneously with just one ajax call?

Is there a way to update 2 divs using only one ajax request? The code for updating through ajax is in ajax-update.php. <?php include("config.inc.php"); include("user.inc.php"); $id = $_GET['id']; $item = New item($id); $result = $item->it ...

Two separate pieces of text converge within a single span

I am facing a challenge with alignment in a bootstrap <span> element. Specifically, I want to align the word "amount" to the left, and the "$" to the right, within the same label. I attempted to nest a <span> inside another <span> and app ...

Adjust CSS to properly position links alongside details summary

Currently enhancing my Hugo site (repository link is here). I am aiming to integrate a details element alongside anchors, maintaining a consistent style. The desired layout is depicted in the initial screenshot where "abstract" serves as the details elemen ...

Overlapping Dropdown Javascript Menus

To achieve the desired effect in the header, I need to create two expandable dropdown menus for the first two titles. My coding experience is limited, especially when it comes to javascript and jquery. Currently, I have managed to create the effect for one ...

Implementing a backdrop while content is floating

I am facing an issue with a div that has 2 columns. The height of the left column is dynamically changing, whereas the right column always remains fixed in height. To achieve this, I have used the float property for both column divs within the container di ...

Is it feasible to have fixed headers adopt the width property?

Is there a way to align the widths of table elements while maintaining a fixed header row? If the 'fixed' property is disabled, the width spaces correctly but the header won't stay fixed and will scroll out of the container div. Enabling the ...

Obtaining data from a website with Java: A step-by-step guide

I am trying to retrieve the SIC Code from the following URL: . However, when I run my code, I encounter the following error: public static void main(String[] args) { try { Document doc = Jsoup.connect("http://www.manta.com/c/mx4s4sw/bowflex-ac ...

Responsive div not displaying background image

Here is a straightforward and easy-to-understand code snippet: HTML markup: <div class="jumbotron text-center top-jumbotron"> </div> CSS: .top-jumbotron { background: #ffcc00; background-image: url('../../bootstrap/img/home-pag ...

What is the best way to move information from one table to a different one?

I have two tables: users2 and user_totals. Each of these tables has rows named clicks (impression_count), fclicks (use_count), and completed_stus (completion_count). The ones in brackets are the new additions in the user_totals table. I would like to tra ...

Despite locating the button, Protractor still encounters difficulties when attempting to click on it

I've been having trouble clicking on a button using Protractor. The issue is that even though the driver can locate the element, it still won't click on it. Any assistance would be greatly appreciated. Thank you in advance. Here is the HTML for ...

jquery dialog box displaying a webpage

I am looking to implement a feature where, upon clicking the edit link in the last column of my dataTable, a separate page for editing should open within a jQuery dialog box. The goal is to seamlessly submit data while providing a user-friendly experienc ...

Having trouble fetching website data using Selenium in Python

I'm encountering an issue when attempting to extract a table from a dynamic webpage using selenium in Python. Here is the code snippet I am currently using: from selenium import webdriver url = 'https://draft.shgn.com/nfc/public/dp/788/grid&apos ...

Troubleshooting: Difficulty with svg mask function when implementing an svg image in a react.js environment

I'm attempting to achieve an effect where an image appears above a background image when hovering over it, similar to this example... https://jsfiddle.net/12zqhqod/7/ <img id="heretic" height="300px" width="300px" src="http://i.imgur.com/0bKGVYB ...

Instead of accessing the HTML page directly, you can view the source page by using the F12

I need to extract both data and IPs from VirusTotal.com using selenium and Beautiful Soup in Python. When I make a get request, I only receive the view-source HTML instead of the complete data-rich HTML shown in Inspect mode (F12). Does anyone have any su ...

Converting HTML to plain text using the DOMDocument class

Is there a way to extract the text content from an HTML page source code, excluding the HTML tags? For example: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="hu"/> <titl ...

Tips for displaying a close icon after completing a file upload

I need to implement a feature where once a user uploads a file, a cross sign should be enabled on the file. I attempted to use javascript for this functionality, but it seems to not be working as expected. There are more than 8-10 different file types that ...

Table pagination in Mat is experiencing overflow, and the button styles have also been customized for a unique look

I implemented a mat paginator feature, however, I am facing an issue where the alignment of items per page options is not correct. Below is the snippet from component.html file: <div class="table-responsive" *ngIf="resultssummaries"> &l ...

What is preventing me from using JavaScript to generate labels?

My current project involves creating dynamic input fields to filter products by color. I initially attempted static checkbox inputs for this purpose, which worked fine. Now, I want to achieve the same functionality but dynamically through JavaScript. Inste ...

Adapting CSS styles according to the height of the viewport

Goldman Sachs has an interesting webpage located here. One feature that caught my eye is the header that appears as you scroll down, with squares changing from white to blue based on the section of the page. I'm curious about how they achieved this ef ...

What is the best way to position my Jchartfx area graph below my gridview?

When my page loads, the graph appears like this. It consistently shows up in the top left corner even though it should be positioned underneath the grid view as intended. var chart1; function createGraph(mpy) { if (mpy == undefined) mpy = 12.00; ch ...