Html IE9的跨浏览器修复

Html IE9的跨浏览器修复,html,css,internet-explorer-8,cross-browser,internet-explorer-9,Html,Css,Internet Explorer 8,Cross Browser,Internet Explorer 9,我有一个网站目前存储在。这是一个非常简单的html/css网站,没有任何复杂的功能。我已经做了大量的研究,研究如何设置页面,使其随着屏幕分辨率和浏览器之间的变化而变化 具体问题: IE8、IE9和Safari之间的标题图像显示不正确 主页上“最大化现金流”下的项目符号显示正确与否取决于浏览器 页面上的Div背景显示正确与否取决于浏览器 我知道网页可以做得更好,即使在多浏览器环境下。我做错了什么 对于需要遵循的一些一般规则,如果您能提供任何帮助,我们将不胜感激。对于需要更正的错误列表 1) IE8

我有一个网站目前存储在。这是一个非常简单的html/css网站,没有任何复杂的功能。我已经做了大量的研究,研究如何设置页面,使其随着屏幕分辨率和浏览器之间的变化而变化

具体问题:

  • IE8、IE9和Safari之间的标题图像显示不正确

  • 主页上“最大化现金流”下的项目符号显示正确与否取决于浏览器

  • 页面上的Div背景显示正确与否取决于浏览器

  • 我知道网页可以做得更好,即使在多浏览器环境下。我做错了什么

    对于需要遵循的一些一般规则,如果您能提供任何帮助,我们将不胜感激。

    对于需要更正的错误列表

    1) IE8、IE9和Safari之间的标题图像显示不正确

    在Safari中,我看不出标题图像有什么问题。您必须定义“显示不正确”的含义


    2) 主页上“最大化现金流”下的项目符号同时出现 是否正确,取决于浏览器

    难怪你会遇到一些布局问题。所有非中断空格都缺少
    。它们应该是
    ,您可以反复使用
    。如果你在布局上依赖于不间断的空格,那么浏览器很有可能会忽略它们

    我在Safari中,在“最大化现金流”下看不到任何项目符号,我只看到渲染文本和“ ”。示例:“ 我们提供内部服务…”

    即使你修复了不间断的空格,我仍然不明白这是如何使它成为一个项目符号列表的。这里根本没有使用
  • 标签


    3) 页面上的Div背景显示正确或不正确, 取决于浏览器

    您使用同一id两次:
    #backgroundmiddle
    。通常,浏览器倾向于忽略相同id的第二个实例。这可能是您上面描述的问题3的根源


    看。每个浏览器都以自己的方式处理这些错误,因此每个浏览器对错误的解释都不同,因此呈现页面的方式也不同


    我不能保证这会解决你所有的问题,但你至少必须确保它在攻击任何遗留问题之前进行验证。

    IE9被认为是微软改进了很多/符合标准的产品,顺便说一句,IE9还没有完全实现,最重要的是,使用浏览器黑客根本不是一个好做法。还有其他解决方案,如重置CSS,即条件注释等,您可以使用。 34票反对

    我更喜欢保罗·爱尔兰的方法:

    将此标签粘贴到打开标签的位置:

    <!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
    <!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
    <!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
    <!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
    
    这真是一个巧妙的方法来做IE特定的CSS样式。但就像其他人提到的那样,小心不要过度检测浏览器

    除非您也希望与Opera匹配,否则\0/之前的空格是必需的。

    在这里询问“要遵循的一般规则”是一个过于宽泛的问题。我建议你坚持上面提到的三个具体问题。
    .foo { color: black; } /* Awesome browsers */
    .ie8 .foo { color: green; } /* IE8 */
    .ie7 .foo { color: blue; } /* IE7 */
    .ie6 .foo { color: red; } /* IE6- */
    
    IE6 - IE10pp4 hacks
    
    No IE9 or IE10pp4 specific hacks have been found.
    
    #element {
        color:black;
    }
    #element {
        *color: blue;    /* IE6+7, doesn't work in IE8/9 as IE7 */
    }
    #element {
        _color: red;     /* IE6 */
    }
    #element {
        color: green \0/; /* IE8+9  */
    }
    @media all and (min-width:0) {
        #element { color:pink \0/; }  /* IE9-IE10pp4 */
    }