如何使应用程序浏览器兼容

时间:2012-05-29 06:57:58

标签: jquery css cross-browser

我正在构建一个在IE8和Mozilla Firefox中运行良好的应用程序,但在IE7中却没有。我喜欢firebug,我喜欢使用它调试我的应用程序,但目前我正在努力解决浏览器兼容问题。我发现开发的应用程序在IE8,FF11中工作但在IE7中没有(主要是布局受到严重影响)。我使用jquery浏览器相关的功能和jquery似乎工作..我该怎么做才能使IE7中的布局正常工作? 使用的框架是spring3,hibernate .. 我有大量的CSS我不认为粘贴,这将是任何有用的。我使用postion亲和使用顶部,左侧位置一些东西..使用了边距和边距但不是那么多..这是原因吗?什么是可能的建议?为什么IE7和IE8以不同的方式呈现内容?我可以使用spring为IE7加载不同的CSS吗?这是一个很好的解决方案吗?如果是,那么春天怎么做? 我应该丢弃使用firebug并依赖IE8调试器,因为我们的客户端主要使用IE7

4 个答案:

答案 0 :(得分:0)

您的应用程序的UI也可以针对IE7进行优化。 你必须为那些在IE7中引起问题的属性(如位置等)添加一些特定于IE7的css。 在你的css属性之前添加一个点。等。

h1{
    font-size: 28px;
    color: #d39933;
    padding-bottom: 5px;
    .padding-bottom: 10px; //For IE7
}

答案 1 :(得分:0)

浏览器兼容性是一个非常冗长的主题,它涵盖了多个正确执行的区域。

如果IE 7或IE浏览器是您唯一的问题,那么CSS Conditional comments就是 PERFECT 解决方案。

创建一个单独的样式表,其中包含IE7浏览器的所有必要修复程序。然后调用脚本是这样的,只有IE 7才会呈现它。

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" media="screen" href="ie7fix.css" />
<![endif]-->

现在,上面的样式表仅适用于浏览器是IE 7的情况。因此,将应用所有修复程序,因此将修复布局。 :)


要了解有关条件评论的更多信息,请阅读this article

答案 2 :(得分:0)

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

答案 3 :(得分:0)

在你的情况下没有神奇的解决方案,你将不得不忍受; =),但我可以给你一些有用的提示。

1 / IE的内置调试器在不同版本上进行了改进,因此您应该使用最新版本的IE进行调试,并使用调试器窗口(F12)中的“浏览器模式”组合框将其设置为“Internet Explorer” 7“,它运行得很好,我从来没有发现这种模式和真正的IE 7之间的区别,你有IE 9的调试功能。

2 / IE7中有一些错误,您必须使用特定的CSS或某些情况下的javascript,但布局的差异并不总是一个错误。 IE7中的布局问题通常是由不同浏览器以不同方式解决的问题约束的结果。典型的例子:在绝对位置,你指定左,右和宽度,有太多的约束和不同的浏览器不会以完全相同的方式处理。

3 / IE特定的css

<!--[if IE 7]> 
<link rel="stylesheet" type="text/css" src="/css/ie7.css" /> 
<![endif]-->