我正在构建一个在 IE8 和 Mozilla Firefox 中运行良好但在 IE7 中运行良好的应用程序。我喜欢萤火虫,我喜欢用它来调试我的应用程序,但目前我正在努力解决浏览器兼容性问题。我发现开发的应用程序在 IE8、FF11 中运行,但在 IE7 中不运行(主要是布局受到高度影响)。我正在将 jquery 用于与浏览器相关的功能,并且 jquery 的东西似乎正在工作..我应该怎么做才能使布局在 IE7 中正常工作?使用的框架是spring3,hibernate..我有大量的CSS我认为粘贴在这里没有任何帮助。我使用了相对位置并使用了顶部,左侧位置一些东西..使用了填充和边距,但没有那么多。 .这是原因吗?什么是可能的建议?为什么 IE7 和 IE8 以不同的方式呈现事物?我应该为 IE7 加载不同的 CSS 集吗?使用弹簧?这是一个好的解决方案吗?如果是,那么在春天怎么做?我应该放弃使用 firebug 并依赖 IE8 调试器,因为我们的客户端主要使用 IE7
4 回答
浏览器兼容性是一个非常冗长的话题,它涵盖了多个正确执行的领域。
如果 IE 7 或 IE 浏览器是您唯一的问题,那么CSS Conditional comments
就是您的完美解决方案。
创建一个单独的样式表,其中包含 IE7 浏览器的所有必要修复。那么调用脚本就是这样的方式,只有IE 7才会渲染它。
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="ie7fix.css" />
<![endif]-->
现在,上面的样式表仅适用于浏览器是 IE 7 的情况。因此,您的所有修复都将被应用,因此布局将被修复。:)
要了解有关条件注释的更多信息,请阅读这篇文章。
您的应用程序的 UI 也可以针对 IE7 进行优化。您必须为那些在 IE7 中引起问题的属性(如位置等)添加一些特定于 IE7 的 css。在您的 css 属性之前添加一个点。喜欢。
h1{
font-size: 28px;
color: #d39933;
padding-bottom: 5px;
.padding-bottom: 10px; //For IE7
}
IE7 和 IE8 有不同的 CSS 支持,有不同的错误和奇怪之处。通常的做法是在这些浏览器中有条件地加载 CSS,以解决与解释 CSS 的标准化方式的偏差。您可以使用 IE 条件注释加载额外的 CSS:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/css/ie7.css" />
<![endif]-->
这是一篇关于条件评论的文章,您可能有兴趣阅读:http ://www.quirksmode.org/css/condcom.html
在您的情况下没有神奇的解决方案,您将不得不受苦;=),但我可以给您一些有用的提示。
1/ IE的内置调试器在不同版本上进行了改进,因此您应该使用最新版本的IE进行调试,并使用调试器窗口(F12)中的“浏览器模式”组合框将其设置为“Internet Explorer 7”,它工作得非常好,我从来没有发现这种模式和真正的 IE 7 有什么区别,而且你有 IE 9 的调试能力。
2/ IE7 中存在一些错误,在某些情况下您必须使用特定的 CSS 或 javascript 来解决,但布局的差异并不总是错误。IE7 中的布局问题通常是由不同浏览器以不同方式解决的有问题的约束造成的。典型例子:在绝对位置,你指定left、right和width,约束太多,不同的浏览器不会以完全相同的方式处理。
3/ IE 特定的 css
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" src="/css/ie7.css" />
<![endif]-->