Question

我刚刚编写了一个css程序，但是当我在8,9版的Internet Explorer中模拟它时，它无法正常工作，这是我的代码：

<html>
    <head>
        <style>
            #main {
                background-color:black;
                width:1020px;
                margin:0 auto;
                padding:0;
                overflow:hidden;
                resize:none;
            }
            #s {
                float:right;
                background-color:red;
                margin-right:8px;
                margin-top:8px;
                margin-bottom:8px;
                width:1000px;
                height:290px;
                overflow:hidden;
                border:2px solid yellow;
            }
            #k {
                float:right;
                background-color:green;
                margin-bottom:8px;
                margin-right:8px;
                width:500;
                height:300;
                overflow:hidden;
                border:2px solid yellow;
            }
            #v {
                background-color:grey;
                margin-right:10px;
                float:right;
                width:486;
                height:143;
                overflow:hidden;
                border:2px solid yellow;
            }
            #d {
                background-color:blue;
                margin-right:10px;
                margin-bottom:10px;
                float:right;
                width:486;
                height:143;
                overflow:hidden;
                border:2px solid yellow;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div id="s">salam</div>
            <div id="k">one</div>
            <div id="d">two</div>
            <div id="v">three</div>
        </div>
    </body>
</html>

这是我的代码，但是当我在IE中模拟它，在8版本中，它工作错误，我如何修复此代码才能在所有版本的IE和其他浏览器中正常工作？我的问题在哪里？在所有浏览器中我的css布局都在页面的中心，但是在IE8,9我的布局是在页面的左侧，我认为主要布局的边缘，当我添加这个＆＃34; ＆＃34;并使用IE模拟它我的布局变化不正确

Answer 1

首先，在代码中添加<!DOCTYPE>：<!DOCTYPE html>

当您添加<!DOCTYPE>时，您的代码停止为所有浏览器工作，由于一个小原因，您错过了在px之后为其他3个框提及“width”。

以下是更新后的代码：

<!DOCTYPE html>
<html>
<head>

    <style>
        html, body {
            height: 100%;
            margin: 0 auto;
            padding: 0;
            width: 1020px;
        }

        #main {
            background-color: black;
            width: 100%;
            height: 100%; /*Remove this if you dont want the Black box to be 100% height*/
            overflow: hidden;
        }

        #s {
            float: right;
            background-color: red;
            margin-right: 8px;
            margin-top: 8px;
            margin-bottom: 8px;
            width: 1000px;
            height: 290px;
            overflow: hidden;
            border: 2px solid yellow;
        }

        #k {
            float: right;
            background-color: green;
            margin-bottom: 8px;
            margin-right: 8px;
            width: 500px;
            height: 300px;
            overflow: hidden;
            border: 2px solid yellow;
        }

        #v {
            background-color: grey;
            margin-right: 10px;
            float: right;
            width: 486px;
            height: 143px;
            overflow: hidden;
            border: 2px solid yellow;
        }

        #d {
            background-color: blue;
            margin-right: 10px;
            margin-bottom: 10px;
            float: right;
            width: 486px;
            height: 143px;
            overflow: hidden;
            border: 2px solid yellow;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="s">salam</div>
        <div id="k">one</div>
        <div id="d">two</div>
        <div id="v">three</div>
    </div>
</body>
</html>

希望这会有所帮助!!!

如果您还有问题，请告诉我！

如何创建适用于所有浏览器的css代码？

1 个答案: