ie9 与现代 html 和 css 语言的兼容性（跨浏览器 CSS）[关闭]答案

【问题标题】：ie9 's compatiblity with modern html and css language (Cross-browser CSS) [closed]ie9 与现代 html 和 css 语言的兼容性（跨浏览器 CSS）[关闭]
【发布时间】：2014-06-17 19:57:47
【问题描述】：

我制作了一个包含几个 div 和一组 css 规则的超基本页面。

它与我过去 2 年见过的所有浏览器完美配合。因为我是网络新手，所以我不知道旧浏览器可以处理什么。我知道像 html5 、 javascript 、 webgl 等现代脚本不适用于旧浏览器。但是，正如我所说，此页面非常简单。奇怪的是它适用于旧版本的 chrome 和 firefox。但是ie9完全不能处理大部分的css规则……

<style media="screen" type="text/css">
    #main
    {
     padding:0;
     margin:0;
     width:100%;
     background-image:url(http://www.sisecam.com.tr/ik/index1.4.1.png);
     background-repeat:no-repeat;
     background-size:100%;
     background-color:white;
    }
    #warningmsg
    {
    position:relative;
    left:40px;
    top:30px;
    }
    #locatordiv
    {
    position:relative;
    top:436px;
    }
    #yellowribbon
    {
    width:100%;
    height:320px;
    background-image:url(http://www.sisecam.com.tr/ik/index1.4.3.png);

    background-repeat:no-repeat;
    background-color:#f5c11f;
    }
    #loginbutton
    {
     margin:0;
     padding:0;
     width:100%;
     display:block;
     height:35px;
     position:relative;
     left:85px;
     top:50px;
    }
    #logo
    {
        margin-left:auto;
        margin-top:90px;
        background-image:url(http://www.sisecam.com.tr/ik/logo.png);
        background-repeat:no-repeat;
        width:100px;
        height:100px;
        position:relative;
        right:20px;
    }
    .title
    {
        position:relative;
        left:20px;
        top:2px;
        font-size:15px;
        color:#FFF;
    }
    .input
    {
        display:block;
        height:25px;
        width:160px;
        background-size:200 40;
        background-repeat:no-repeat;
        margin-top:34px;
        position:relative; 
        top:55px;
        left:65px;
    }
    input
    {
        font-size:17px;
        width:170px;
        height:20px;
        border-style:none;
        padding:0;
        outline:none;
    }
    body 
    {
     background:white;
    }
    input[type="submit"] {
     opacity:0;
     width:inherit;
     height:inherit;
    } 
</style>

假设 ie9 可以处理 div 和它们的 id ...

我的主要问题是 css 兼容性。是否可以编写适用于 ie9 的 css 规则，因为它适用于其他浏览器？

任何建议都会有所帮助。

【问题讨论】：

您只能为 IE9 编写单独的 css 文件。
stackoverflow.com/questions/6418139/…
您是否为 HTML 文档设置了 DTD - 如果没有 DTD，您的浏览器将进入“Quirks 模式”，并且某些样式可能与预期不符。
除了一些较新的 CSS3 的东西，IE9 工作正常，一般来说。上面的CSS应该没有问题，只要写得对。
@Big Chris 是的，它似乎是由 DTD 引起的。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">完美解决。你想发布正确答案吗。

标签： javascript html css internet-explorer cross-browser

【解决方案1】：

在编写语法正确的 HTML 时，您应该始终包含一个文档类型定义 (DTD)，以告知浏览器它正在呈现的文档类型以及它是否应该应用某些呈现规则。

当您在不同的浏览器（尤其是 IE）上遇到某些显示问题时，这也可能是关键！

如果 DTD 不存在，IE 会有一个“怪癖模式”——这会导致浏览器不应用任何呈现规则，并且许多样式（尽管已应用）仍然看起来不符合开发人员的需求。

【讨论】：