Internet Explorer CSS问题
[英]Internet Explorer CSS Problem
问题描述
This page is being rendered incorrectly by IE 9 (and probably older versions too). 
IE 9错误地渲染了此页面 （可能也是旧版本）。 The right menu is floating to the bottom of the page. 右侧菜单浮动在页面底部。 Firefox, Chrome and Safari are rendering it correctly. Firefox，Chrome和Safari可以正确呈现它。 Other pages in the blog are also being rendered fine by all browsers. 博客中的其他页面也被所有浏览器很好地渲染。 I already tried to fire IE 9 Developer Tools (F12) and reduce the width of some divs (such as #main and .columns-inner)... no lucky with this approach, even with extra space the right menu is still rendered at the bottom. 我已经尝试触发IE 9开发人员工具（F12）并减小某些div的宽度（例如#main和.columns-inner）...这种方法并不幸运，即使有额外的空间，仍会在底端。 So I figure that the problem is in the Blogger auto-generated tags / css for the page content (which I am able to modify). 因此，我认为问题出在Blogger自动生成的页面内容标签/ CSS（我可以修改）中。 Any CSS gurus out there can point what is wrong? 那里的任何CSS专家都可以指出出什么问题了？
Cheers, 干杯，
4 个解决方案
解决方案1
4 2011-04-25 00:17:27
You have this line in your <head> , which is causing IE9 to render the page in IE7 mode: 您的<head>具有以下行，这导致IE9以IE7模式呈现页面：
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
If you remove this, it renders fine in IE8 and IE9. 如果删除此选项，它将在IE8和IE9中呈现良好。 It still renders poorly in IE7, though. 但是，它在IE7中仍然表现不佳。
Edit: 编辑：
In response to your comment, I am able to replicate the issue with the background no longer being opaque. 根据您的评论，我可以在背景不再透明的情况下复制问题。 After some investigation, there is a particular script file being loaded: 经过调查后，正在加载一个特定的脚本文件：
http://www.blogger.com/static/v1/jsbin/938506610-ieretrofit.js http://www.blogger.com/static/v1/jsbin/938506610-ieretrofit.js
If you remove the <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> on line 4 of the source, and you remove the ieretrofit.js file from line 1471 of the source, the page should render correctly in IE9. 如果您在源代码的第4行中删除<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> ，并且从源代码的第1471行中删除了ieretrofit.js文件，则该页面应该在IE9中正确呈现。
Since the ieretrofit.js file appears to be generated by Google, you might want to ask them about it. 由于ieretrofit.js文件似乎是由Google生成的，因此您可能要询问他们。 If you would like to disable it JUST for IE9, and allow it to continue for IE8 and below, you should take a closer look at line 1471 of the source. 如果要仅针对IE9禁用它，并允许它继续用于IE8及以下版本，则应仔细查看源代码的1471行。 Here is a snippet (it's quite long, this starts around character #2275): 这是一个代码段（很长，从字符＃2275开始）：
'\74!--[if IE]\76\74script
The !--[if IE] there is part of an IE conditional comment . ！-[如果是IE]是IE条件注释的一部分 。 You can change that snippet like so, and it will still target IE8 and below, without affecting IE9: 您可以像这样更改该代码段，它仍将以IE8及更低版本为目标，而不会影响IE9：
'\74!--[if lte IE 8]\76\74script
Let me know if you have any further issues! 让我知道您是否还有其他问题！
解决方案2
2 已采纳 2011-04-25 00:17:54
该页面上有104个验证错误 -如果是您，我将首先修复这些错误 。
解决方案3
1 2011-04-25 00:16:42
Almost certainly it is because the page is invalid . 几乎可以肯定是因为页面无效 。 Also, I really would think about starting again with this page as it is overly complex markup. 另外，我真的会考虑从此页面重新开始，因为它的标记过于复杂。
解决方案4
0 2011-04-25 01:29:43
Guys. 伙计们。 Figured it out (with great help from andyb and Paul D.) The validator pointed to some unpaired </div> tags that I removed. 弄清楚了（在andyb和Paul D的大力帮助下），验证器指出了一些我删除的未配对</div>标记。 Now it is working flawless. 现在它可以正常工作了。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.