问题
Here's the original page that I coded using "Adaptive Design", and has no support for mobile devices: http://opportunityfinance.net/Test/savedateIE8/index.html
Looks great in IE 8 as it should via the pic below:
Here's a page that I optimized for mobile devices, basically it is EXACTLY the same as the first page, except it adds in <meta> tags and such for mobile devices. Looks good in all browsers that I test, except IE 7 (which I could care less about), and IE 8 (WHICH I REALLY CARE ABOUT) A lot of people visit the site using IE 8, so it needs to support IE 8!: http://opportunityfinance.net/conference-2013/index.html
Pic of what it looks like in IE 8 below:
Why is this looking completely different in IE 8 than the first pic? I can't understand it. AFAIK, it should be loading up the index.css file and applying it exactly like the first page. What is the problem here?
Could it possibly be related to this bit of code:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
But if I remove that code than it looks all jacked up in IE 9 also!
EDIT: Please do not edit my code changing IE 8 to IE 9. I understand that this problem is being tested in IE 9, but it is using IE 8 Document Mode in Developer Tools, so it is the same as IE 8!
回答1:
Ok, here's how I solved this problem. Apparently any version of IE before IE 9 does not attach the stylesheet when using media queries inside of the link tags media attribute. Also, IE 8- had some odd behavior when presented with this line: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> And as it turns out, I don't even need this line: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> which was causing problems since the Google Chrome Frame wasn't available, and edge wasn't either. So, I just removed that line, and all is fine now.
Here's the dirty hack I had to do in order to get this working for mobile devices and IE 7 and 8, for anyone interested:
<!--[if gte IE 9]>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<![endif]-->
<!--[if !IE]><!-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!--<![endif]-->
<link rel="stylesheet" type="text/css" href="css/narrow.css" media="only screen and (max-device-width: 600px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<![endif]-->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="css/index.css" media="only screen and (min-device-width: 601px)" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="css/index.css" media="only screen and (min-device-width: 601px)" />
<!--<![endif]-->
I wish there was an else statement in these conditionals, but whatever. This works now and loads up the index.css file and thank god, cause I was pulling out my hair on this one! The narrow.css file doesn't need any conditionals, since IE 7 and 8 ignore the stylesheet anyways cause it uses media queries.
来源：https://stackoverflow.com/questions/15748241/2-ie8-webpage-views-look-completely-different-why