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
Related
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.
I have researched a lot regarding why my JSTree is renderering really badly in IE8, while working perfectly in Chrome. At least one of the problems is IE8's lack of support for the css-property background-size. I am using custom icons to represent folders and files. Each line in the tree structure has a height of 24px in IE8 , when it is 40 in chrome. The latter browser calculates the line height, by automatically wrapping around the icon size, using background-size: auto;. IE8 does not.
I've tried to implement lots of different solutions to make up for IE8's lacking functionality, like:
How do I make background-size work in IE?
IE 8: background-size fix
and the linked-to https://github.com/louisremi/background-size-polyfill
However, due to the complexity of the jstree, and it's default css-files, I am having a really hard time implementing any of these solutions into the existing code, as I am lacking the experience to fully understand the structure of the default.css.
What would be the correct course of action to make this work? I've also searched for compatible .css files for IE8, but found nothing.
An answer which confirms my fears of having to create my own .css from scratch, and understanding it completely, would also be very welcome. However, I would love a second opinion, before I invest the time to do that.
EDIT:
These are screenshots from my current situation:
Chrome has nice spacing, and visible chevron/arrows/expanding icons. Also, the font works.
IE8 has no auto-size, which makes the height 24px instead of 40px. Ive tried manually setting them to 40, but no luck. The lack of visual finesse does not bother me too much, but the lack of the arrow expanding icons are vital to my application's usability.
Working edits of the current theme, will be accepted as an answer. So will link to alternative themes that are compliant with IE8. Or anything that helps me understand how to fix the problem myself.
The best way is create a separate style sheet for IE8
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->
there are many other things like in page like you need to add meta tag
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
and one more thing please post some of your code in a fiddle so that we can better trace the actual cause of problem.
Update:
also check after adding this fix..
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
I hope this will add something positive.
Update:
After checking jsTree Demo I can conclude one more problem the jQuery Version.
If you are using jQuery v1.10.1 or later. that jQuery does not have support from older browsers like IE8 for that one must use v.1.9.1 which is the last version which supports IE8.
Try respond.js which made your ie8 browser to compatible for css3 pseudo elements and other stuff.
https://github.com/scottjehl/Respond/tree/master/src
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.
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 :)
I know this could boil down to a philosophical issue, so I don't mean to start a discussion on the topic. But I'm looking for the (or a couple of them) best way to resolve most issues of CSS styling in Internet Explorer 6.
I'm aware of this article on forabeautifulweb.com, and it's recommendation to just feed IE6 users a universal plain IE6 stylesheet with just some basic styling better than the browser defaults. For my application this is not the best.
I'm also aware of the concept of "fixing" IE6's CSS support via Javascript, and I'm sort of a fan of this idea. But I don't know what (if any) the best one is - I know there's several floating around in the wild. This article by Eric Meyer mentions one, but this was written almost 2 years ago, so is there a more standard script to use for this purpose now?
Can anybody point me to one or two such scripts that have been proven to be effective for updating some of IE6's handling of CSS to behave more like a modern browser?
UPDATE: to all the people answering who are trying to convince me not to use JS to fix the problem - I am plugging my ears and humming. :)
Seriously, I'm not asking whether or not to use JS for this. We've already decided we don't need to support IE6 and it is not worth the time for us to try to "debug" our stylesheets just for IE6. This decision is based on our audience and on our site stats for IE6 usage.
As far as all the comments about "what if the user doesn't have JS enabled?" Well in that case a lot of stuff on our site is not going to look right anyway, so that is somewhat of a mute point.
I've already implemented the IE7.js that Gordon suggested, and that is quite sufficient for us to get by in IE6, with very little drawback.
Thank you all just the same for your input.
You can use this library if you want to do it with JavaScript:
IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
There is also CSS3Pie, which adds CSS3 support to browsers:
PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.
Also have a look at Progressive Enhancement and Graceful Degradation for a design philosophy.
Please don't use JavaScript to fix the problem, just add some rules to a stylesheet to fix them...
<link rel="stylesheet" type="text/css" href="normal.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
In the ie6.css, you just have rules that fudge the styles to work in IE6, you still use your normal stylesheet alongside it, so your site looks the same in IE6 and normal world.
From personal experiance, ie6 can be fixed within a few lines of CSS and a fair bit of inspecting with firebug/developers toolbar.. without the need for conditional comments.
majority of the problems I come accross are padding / margin based and it is down to me not using the best method first time round.
I also find that overflow:hidden fixes its fair share of ie6 bugs too.
i suggest, get ie6 open with the developers toolbar and try and find where the problem lies, and think of a better way to code that section.
Thats just me personally, I use conditional comments as a LAST resort.
Dean Edwards’ ie7.js script (linked by Gordon) is still the state of the art in this area.
As to what’s the best approach, it depends. Dean Edwards’ script fixes a lot of IE CSS bugs, and allows you to use selectors like the multiple class selector and the child selector that aren’t supported at all in IE 6.
If you’re happy that the IE 6 users in your target audience tend to have JavaScript turned on, a library like Dean’s can save you a bunch of time, and allow you to trim down your code by using the selectors that IE 6 doesn’t support.
However, you’ll likely still need an IE 6 stylesheet to deal with issues that Dean’s library doesn’t fix.
The best solution may be to wait for Microsoft to stop supporting IE 6 (like they did with Mac IE 5), because if Microsoft don’t support it, it’s hardly fair for people to expect you to. We‘re currently hoping for 2014 on that score.
Generally, you don't need javascript. You can use plain old CSS. It helps to have a good knowledge of hasLayout though.
More often than not, you can fix IE6 and 7's issues by giving the problem element layout. To do that, give it a fixed height or width, or use the proprietary zoom.
My favoured method of targeting specific versions of IE browser is to use conditional comments to add a <div> as a direct child of <body> which lets me know which version of IE I'm in (like so). That way, I can target IE6 directly:
.IE6 div.fubar {
zoom: 1;
}
The other thing to remember is that it's almost impossible to achieve pixel parity across IE6/7/8/Firefox/Safari/Chrome/Opera, so if some things don't look quite right in a browser that's nearly ten years old, you don't always need to worry about it.
Position is everything has some useful tips on IE bugs, too.
Don't use javascript if you can avoid it - you are not guaranteed that your users have JS activated (as already mentioned) and you actually don't need it.
To get rid of many problems of different interpretations from browsers (not just IE) user a css-reset stylesheet. There are many floating around.
Even better yet, use a CSS framework which will remove many many problems between different browsers and will come with many helpful classes to solve standard issues.
I for one love YAML (http://www.yaml.de/en/home.html), then there's Blueprint (http://www.blueprintcss.org/) and probably a few others. Believe me - once you used a CSS Framework you will never want to go back.
jQuery and its plugins work best for IE6 issues. Give it a try!