I'm attempting to embed a "new" style page inside of an older page via iframe, but in IE9, things like border-radius are still having no effect when the page is loaded inside the iframe. When the page is loaded on its own, the rounded corners and effects appear just fine, but when inside the iframe, the css properties seem to be ignored.
Initially I thought this was DOCTYPE inheritance issues, but they're both <!DOCTYPE html> (outer and inner page). Next, I belive it's the content="IE=Emulate8" that's being inherited by the inner iframe. This is, of course, a theory. If it's an incorrect theory, please let me know. :)
Anyway, here's an example of the page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="IE=EmulateIE8" http-equiv="X-UA-Compatible">
</head>
<body>
... stuff...
<iframe>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
</html>
</iframe>
</body>
</html>
Some of this may not really be relevant. Anyway, my question is: if the EmulateIE8 is the culprit as to why css properties like border-radius aren't working in the iframe under IE9, is it possible to override it or disable it inside the inner iframe?
Just to note: changing what's outside the iframe is difficult without changing the entire framework of the application, unfortunately (legacy apps *sigh*). I'm attempting to put something a little more modern inside of the legacy application.
As noted here:
As of IE9 mode, webpages cannot display multiple document modes. For example, consider a standards-based webpage that contains a frame element that displays content in quirks mode. IE9 mode displays the child frame in standards mode (because the parent document is in standards mode). Starting with Internet Explorer 10, however, child frames can emulate quirks mode. For more info, see IEBlog: HTML5 Quirks mode in IE10. For best results, however, use document modes consistently.
Related
I have IE9 browser. My application is rendering in Standard Document Mode which works fine for me. When I select
Browser mode: IE9 compatibility mode
then my document mode should change automatically to IE7 Standards.
Is there any meta tag that could help me so, whenever I select browser mode, my document mode should be IE9 standards? I have tried this :
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Summary Dashboardt</title>
</head>
----
---code--
</html>
But can't get any success. Is there any meta tag that will be help me?
I have this HTML, valid for w3c:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>COMUNE DI MILANO</title>
</head>
<body>
<h1>Ciao Mamma</h1>
</body>
</html>
I don't know why IE Switch to compatibility mode.
I found a meta tag that force the compatibility mode, but I want to know how to build a working HTML page..
Someone knows what will cause the switch? It could depends on Apache version / configuration?
Thank's a lot, Davide.
Try check the headers that are sent along with it, see if there's a X-UA-Compatible header that's set to something undesirable.
How can I force Internet Explorer 9 to use standards document mode? I built a website and I'm finding that IE9 uses quirks mode to render the website pages. But I want to use standards mode for rendering.
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
This makes each version of IE use its standard mode, so IE 9 will use IE 9 standards mode. (If instead you wanted newer versions of IE to also specifically use IE 9 standards mode, you would replace Edge by 9. But it is difficult to see why you would want that.)
For explanations, see http://hsivonen.iki.fi/doctype/#ie8 (it looks rather messy, but that’s because IE is messy in its behaviors).
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
The meta tag must be the first tag after the head tag or it will not work.
There is something very important about this thread that has been touched on but not fully explained. The HTML approach (adding a meta tag in the head) only works consistently on raw HTML or very basic server pages. My site is a very complex server-driven site with master pages, themeing and a lot of third party controls, etc. What I found was that some of these controls were programmatically adding their own tags to the final HTML which were being pushed to the browser at the beginning of the head tag. This effectively rendered the HTML meta tags useless.
Well, if you can't beat them, join them. The only solution that worked for me is to do exactly the same thing in the pre-render event of my master pages as such:
Private Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
Dim MetaTag As HtmlMeta = New HtmlMeta()
MetaTag.Attributes("http-equiv") = "Content-Type"
MetaTag.Attributes("content") = "text/html; charset=utf-8;"
Page.Header.Controls.AddAt(0, MetaTag)
MetaTag = New HtmlMeta()
MetaTag.Attributes("http-equiv") = "X-UA-Compatible"
MetaTag.Attributes("content") = "IE=9,chrome=1"
Page.Header.Controls.AddAt(0, MetaTag)
End Sub
This is VB.NET but the same approach would work for any server-side technology. As long as you make sure it's the last thing that gets done right before the page is rendered.
put a doctype as the first line of your html document
<!DOCTYPE html>
you can find detailed explanation about internet explorer document compatibility here: Defining Document Compatibility
To prevent quirks mode, define a 'doctype' like :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
To make IE render the page in IE9 document mode :
<meta http-equiv="x-ua-compatible" content="IE=9">
Please note that "IE=edge" will make IE render the page with the most recent document mode, rather than IE9 document mode.
Make sure you take into account that adding this tag,
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
may only allow compatibility with the latest versions. It all depends on your libraries
I tried with an alternate method:
Hit F12 key
Then, at right hand side in the drop down menu, select internet explorer version 9.
That's it and it worked for me.
Make sure you use the right doctype.
eg.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
or just
<!doctype html>
and also read and understand how compatibility modes and developer toolbar for IE work and set modes for IE:
I have faced issue like my main page index.jsp contains the below line but eventhough rendering was not proper in IE. Found the issue and I have added the code in all the files which I included in index.jsp. Hurray! it worked.
So You need to add below code in all the files which you include into the page otherwise it wont work.
<!doctype html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
A web application we have for an organisation that is officially upgrading its standard browser from IE6 to IE8 (queue celebrations), we've set all our DOCTYPEs to be <!DOCTYPE html> (as well as fixed other html code) and I thought that in IE8 this would cause the page to be rendered in IE8 Standards Mode. However, it is still shown in IE7 Standards mode.
I've added the <meta http-equiv="X-UA-Compatible" content="IE=8"> into the <head> section and it still fails to default to IE8 Standards mode. I'm presuming at this stage that there must be a setting (perhaps Group Policy etc) that is forcing the mode.
After reading a hack on an MSDN forum that if you put the meta tag before the <html> tag, it correctly displays as IE8 Standards mode, and this worked for me. Is there another way to do this? It just looks terrible seeing the meta tag there...
Here's roughly how each page is made up:
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
</body>
</html>
You could set X-UA-Compatible as a HTTP response header, instead of as a meta tag.
This is a much cleaner solution than placing it above the <html> tag.
A confusing useful blog post concerning X-UA-Compatible and its many intricacies:
http://farukat.es/journal/2009/05/245-ie8-and-the-x-ua-compatible-situation
Two possibilities:
The meta tag definitely belongs into the <head> section of the document.
If this is in an Intranet, this may be IE's "Smart default" kicking in. Yes, there is such a thing as smart defaults. See here. Because if you're in an Intranet, IE8 will automatically go into IE7 compatibility mode so as not to break the many corporate apps that rely on IE7. Makes sense, right? Right?
Is this possible at all?
I tried adding this to the page but it didn't change a thing.
<meta http-equiv="X-UA-Compatible" content="IE=8">
UPDATE- I'm trying to do this because our site has some IE9 specific CSS issues, which wouldn't appear in IE8.
Thanks
You can use the document compatibility
mode to do this, which is what you
were trying.. However, thing to note
is: It must appear in the Web page's
header (the HEAD section) before all
other elements, except for the title
element and other meta elements Hope
that was the issue.. Also, The
X-UA-compatible header is not case
sensitive Refer:
http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx#SetMode
Edit: in case something happens to kill the msdn link, here is the content:
Specifying Document Compatibility Modes
You can use document modes to control the way Internet Explorer
interprets and displays your webpage. To specify a specific document
mode for your webpage, use the meta element to include an
X-UA-Compatible header in your webpage, as shown in the following
example.
<html>
<head>
<!-- Enable IE9 Standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=9" >
<title>My webpage</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>
If you view this webpage in Internet Explorer 9, it will be displayed
in IE9 mode.
The following example specifies EmulateIE7 mode.
<html>
<head>
<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
<title>My webpage</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>
In this example, the X-UA-Compatible header directs Internet Explorer
to mimic the behavior of Internet Explorer 7 when determining how to
display the webpage. This means that Internet Explorer will use the
directive (or lack thereof) to choose the appropriate
document type. Because this page does not contain a
directive, the example would be displayed in IE5 (Quirks) mode.
Yes. Recent versions of IE (IE8 or above) let you adjust that. Here's how:
Fire up Internet Explorer.
Click the 'Tools' menu, then click 'Developer Tools'. Alternatively, just press F12.
That should open the Developer Tools window. That window has two menu items that are of interest:
Browser Mode. This setting determines the value of the user-agent header sent for every request.
Document Mode. This setting determines how the rendering engine renders the page.
More at http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx
The 1st element as in no hard returns. A hard return I guess = an empty node/element in the DOM which becomes the 1st element disabling the doc compatability meta tag.
On the client side you can add and remove websites to be displayed in Compatibility View from Compatibility View Settings window of IE:
Tools-> Compatibility View Settings