Can I fool IE11 to operate IE10? - css

I have searched and searched, read and read for several days now.
I am using Highcharts/jfiddle for reporting purposes. My reports are perfect when using another browser other than IE11. According to a compatibility chart that I found IE11 has compatibility issues with what I'm using. My client uses IE11.
What I want to know.. is there something that I can do programmatically, e.g., CSS or HTML that would force IE11 to run a previous version.
Yes, I have tried compatibility mode settings.
Any help is welcome.
Regards,
Steve

You should try placing this at the beginning of your head tag:
<meta http-equiv="x-ua-compatible" content="IE=10" />
Officially the tag is deprecated, but it is worth a try to see if Internet Explorer 11 will still respect it.

Related

Any way to 'hack' Internet Explorer 10 to display border-image?

I've only recently come to realise that Internet Explorer 10 doesn't support the CSS border-image property at all, not even using a vendor-prefix.
My normal go-to solution would be to use CSS3 PIE, however that's in the rather unique position of being unable to do a whole lot to help given that Microsoft have opted to depreciate support for .htc behaviours in IE10. There's a discussion about this on their forums here.
It seems possible that there might be a work-around by building a custom JS version of CSS3 PIE but I'm loath to take the performance-hit.
Is there any other way that anybody has discovered to convince IE10 to support border-image (as it really should!).
IE10 doesn't completely remove support for HTC behaviors. You can still use them if you force IE10 to emulate IE9, which you can do by adding the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
This would let you use CSS3 PIE's HTC behaviors again, but it would also prevent you from using other new features introduced in IE10. It's a tradeoff, but one that would allow your site to appear as intended in IE10 until such time as a better border-image polyfill is available.

IE9 rendering css3

Hi recently I have started to develop a website which uses a few basic css3 features which I am sure that are supported in IE9 because I've checked. No matter what I did IE9 seemed not to render any of the css3 properties not even when I was using ms prefix.
After I did some reasearch I found a question here on stackoverflow that dealt with a similar problem to mine and someone offered a solution to that problem.The person said to add this line in the head tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
After I added this everything seemed to work. What I would is an explanation as to why do I have to use this to make css3 features work in IE9 and what is it's meaning?
I am still prety new to web development and I tried to learn html/css/javasript/php/mysql in about 6 months. While I am now capable of creating functional websites alot of gaps seem to be left in my head so I hope this is not a very basic question.
This is the document compatibility.
It's all explained in this article - http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx

box-shadow does not work in IE9

Ive seen a lot of talk about box-shadow in IE9 - but when i try it out it does not work! (of course im not suprised ... sigh). Am i mistaken that these thing are supposed to work in ie9 or is mys css wrong or is there a mode in ie9? Heres the CSS code im using:
.jW{position:absolute;border-radius:8px;box-shadow:4px 4px 24px 4px #000000}
Same goes for border-radius. Ive even opened up CSS3 sites that have these attributes like http://css3please.com/ and they dont work in IE9 either. Actually: bugger IE!
OK - found the problem. Firstly thanks to sandeep for refering me to part of the problem. IE9 does not require any doctype for these styles to work. Whats causing the problem is "border-collapse:collapse" on tables - use cellspacing=0 then it works - still: bugger IE
It should work (as far as I know - will run some simulations later). In the meantime your can check out CSS3 PIE (http://css3pie.com) that enhances IE rendering of CSS3 properties (not really IE's rendering, but close enough).
According to CanIUse.com, IE9 does support box-shadow and border-radius.
I haven't tried it with box-shadow, but I can definitely vouch for it working with border-radius
The most likely reason for it not working is that you're actually running in IE8 compatibility mode (or even IE7 compat). This will make IE9 drop all the new features and pretend to be the older version.
The quickest way to check if this is the problem is to hit F12 to open the IE developer tools window. This will show the rendering mode in the top right hand corner.
If it is rendering in compatibility mode, then you can change it here. You can also add a meta tag to the top of your code to force your site to use the latest IE mode. If it's happening for every site then you may need to change your browser settings.
Hope that helps.
Ooops - im sorry but i wasnt entirely correct in my testing - it seems that doctype is essential for these things to work. But then everything else breaks down. I think next time ill write for IE first then the others - hey mabe thats microsofts strategy all along!
I also was experiencing the problem where the box shadow was not being displayed in IE9. In my case, IE9 was rendering the document in compatibility mode, even though I had a valid DOCTYPE. I was debugging locally, and IE has a setting "Display intranet sites in Compatibility View" which was enabled, apparently by default. After disabling this, everything works as expected. This can be found under Tools -> Compatibility View settings.
The reason box shadow does not work is that IE automatically runs in quirks mode which does not support this.
If you set internet explorer to run in standards mode it will display box-shadow correctly
you can force ie to run in standards mode by following this post: How do I force Internet Explorer to render in Standards Mode and NOT in Quirks?
If you can't edit http headers then use: <meta http-equiv="X-UA-Compatible" content="IE=edge">
(or <meta http-equiv="X-UA-Compatible" content="IE=edge" /> if you're using XHTML)
It should work fine if you do this

Is it possible IE8 will render CSS differently in Windows 7 vs Windows XP

Totally confused.
At work, I have an older Windows XP machine (I have no choice) and on it I have IE8.
My boss has a laptop with Windows 7 and IE8.
I have a working prototype website with an IELegacy CSS that does some tricks to the CSS to make some things work in my Windows XP IE8. These tricks are small, mostly spacing issues. (Yes, I know, I don't like still resorting to doing this, but sometimes you have no choice.)
However, all the things in the ielegacy.css plus some other spacing issues go all wrong and totally wonky on my boss' Windows 7 IE8 machine. (like data blowing out of its containing cell in a table! how is that even possible - its a table).
I have no idea how to fix this.
So I ask the collective... is it even possible that IE8 can be doing different things on different versions of Windows? or is something else going on here?
If so, any ideas on how to adjust for that?
Also, if so, just kill me now :)
Thanks
JD
PS - I have no comparison screen grabs.. I will try to get some.
Update - thanks all - Compatibility View was the culprit. I totally forgot about it. (I only use IE for testing). Everybody had excellent troubleshooting ideas, and I agree, I did not provide enough info. (FYI fonts are standard MS Arial because I need full UTF-8 and I don't need pixel perfect...). I appreciate it!
Now I just need to get Compatibility View and non-Compatibility View to match up - which shouldn't be too hard. I just needed to understand what was going on. Cheers!
Have you checked to see if one of the browsers are in compatibility mode while the other isn't?
If you used the internet explorer developer toolbar (I believe the shortcut is F12) you can also change the engine your IE is using to render the site, making it render differently.
After reading the rest of the comments/answers:
You fix it by:
Making your site work in IE7, because that's what Compatibility Mode is "simulating". Your site should ideally work in Internet Explorer 7, as it's still used by a smallish percentage of users.
Figuring out why your site is arbitrarily sometimes in IE7 mode. Your site should be in IE8 mode all the time in IE8.
It's rather complicated, see: http://hsivonen.iki.fi/doctype/#ie8modes
A simple fix would be to add this meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
This should (almost) always force the most up-to-date IE browser mode, and Chrome Frame if it's available.
All other things being equal, IE8 should render the same on XP and Windows 7. It's more likely that accessibility settings, caching, missing fonts, screen resolution, and/or plugins are causing the difference.
after readindg your answer of user681919:
Do you have something like this in your code?
<meta http-equiv="X-UA-Compatible" content="IE=7" />
This force to render a page in IE7
or it could be that your browser is in quirk mode (when you have errors in the HTML and it cannot render properly it switch to a "safe mode" rendering)
Here some more details:http://www.quirksmode.org/css/quirksmode.html

Internet Explorer Compatibility Issues (CSSPlay Menu)

I've been running into the age-old problem of cross-browser compatibility ever since I began making websites, but this time I'm stumped.
I have a pure-CSS and HTML menu that I used from CSSPlay. It works flawlessly in Firefox but not in Internet Explorer. Can somebody help me figure out why? It works fine in IE9 Compatibility Mode, ironically.
Edit: Forgot the link. http://jsfiddle.net/Xh9Kz/
Also, I've been running into a lot of trouble with percentage differences between webkit and Internet Explorer browsers in general. While Webkit browsers also percentages to add up to 100%, IE seems to not do so. Does anyone have a resource for this so I can code to avoid it?
Thanks in advance. Merry Christmas everyone!
Nothing is wrong with your code, it's just something common with the examples from CSSPlay, check the last question in the FAQ:
10.The demonstration/menu does not work in IE8
IE8 is very temperamental when it comes to multi-level demonstrations
and menus (not just mine). I will be
going through my demonstrations over
the coming months to get them to work
in IE8 but in the mean time the
easiest way is to switch IE8 into IE7
emulation mode which will cures all
problems.
To do this add the following meta tag immediately afer the tag:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
here's the same exact code but with the meta tag added :)

Resources