如何使这个CSS与IE浏览器兼容？

Question

嗯，我有这个css代码，这是一个网站我和我的朋友正在托管。 但是，由于它已经出现了我们对IE用户的一个小抱怨我不知道如何使用IE浏览器可以帮助我这个？我听说它不应该那么难但我不知道从哪里开始。

#table1 {

    font-family: open sans condensed;
    background-color: #FFF;
    border-collapse: collapse;
    margin: auto;
    padding: 100%;
}

#table11 {
    font-family: open sans condensed;
    background-color: #FFF;
    border-collapse: collapse;
    margin: auto;
}

th {
    font-family: open sans condensed;
    background-color: #CCC;
    font-size: 25px;

    border-style: solid;
    border-width: 3px;
    box-shadow: 0px 0px 8px #FFF;
    border-color: black;
    text-align: left;
    vertical-align: bottom;
}   

td {
    background-color: #FFF;
    border-style: solid;
    border-width: 3px;
    box-shadow: 0px 0px 8px #FFF;
    border-color: black;
    text-align: left;
    vertical-align: bottom;
}

/*#table {
    top: -500px;
    /*Z-index: 19999px;
    background-color: #FFF;
    border-style: solid;
    border-width: 3px;
    box-shadow: 0px 0px 8px #FFF;
    border-color: black;
    text-align: left;
    vertical-align: bottom;
} This does nothing but it ruins the CSS if not commmented*/


a:link {
    font-size: 20px;
    vertical-align: middle;
    color: #A00000   ;
    font-family: julius sans one;
    font-weight: 900px;
    text-decoration: none;
    vertical-align: bottom;
}

a:visited {
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    vertical-align: bottom;
}

a:hover {
    color: rgb(129,129,129);
    font-size: 20px;
    vertical-align: middle;
    text-decoration: underline;
    vertical-align: bottom;
}

a:active {
    color: #A00000   ;
    vertical-align: middle;
    text-decoration: none;
    vertical-align: bottom;
}

#buttonbox {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 205px;
    border-radius: 100px;
    border: 1px;
    border-style: solid;
    border-color: #CCCCCC;
    box-shadow: 0px 0px 9px 1px rgba(221,221,221,0.5);
    background-image: linear-gradient(bottom, #04131A 24%, #282E2E 50%);
    background-image: -o-linear-gradient(bottom, #04131A 24%, #282E2E 50%);
    background-image: -moz-linear-gradient(bottom, #04131A 24%, #282E2E 50%);
    background-image: -webkit-linear-gradient(bottom, #04131A 24%, #282E2E 50%);
    background-image: -ms-linear-gradient(bottom, #04131A 24%, #282E2E 50%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.24, #04131A),
        color-stop(0.5, #282E2E)
);
}

#buttonbox:hover {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 205px;
    border-radius: 100px;
    border: 1px;
    border-style: solid;
    border-color: #CCC;
    box-shadow: 0px 0px 9px 1px rgba(221,221,221,0.5) inset;
    background-image: linear-gradient(bottom, #04131A 24%, #282E2E 50%);
    background-image: -o-linear-gradient(bottom, #04131A 24%, #282E2E 50%);
    background-image: -moz-linear-gradient(bottom, #04131A 24%, #282E2E 50%);
    background-image: -webkit-linear-gradient(bottom, #04131A 24%, #282E2E 50%);
    background-image: -ms-linear-gradient(bottom, #04131A 24%, #282E2E 50%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.24, #04131A),
        color-stop(0.5, #282E2E)
);
}

#buttonbox:active {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 205px;
    border-radius: 100px;
    border: 1px;
    border-style: solid;
    border-color: #DDD;
    box-shadow: 0px 0px 9px 15px #CCC inset;
    background-image: linear-gradient(bottom, #04131A 24%, #282E2E 50%);
    background-image: -o-linear-gradient(bottom, #04131A 24%, #282E2E 50%);
    background-image: -moz-linear-gradient(bottom, #04131A 24%, #282E2E 50%);
    background-image: -webkit-linear-gradient(bottom, #04131A 24%, #282E2E 50%);
    background-image: -ms-linear-gradient(bottom, #04131A 24%, #282E2E 50%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.24, #04131A),
        color-stop(0.5, #282E2E)
);
}

#button {
    font-family: open sans condensed;
    color: #4d4d4d;
    font-size: 25px;
}

#button:hover {
    font-family: open sans condensed;
    color: #8d8d8d;
    font-size: 25px;
    text-decoration: none;
}

#div1 {

}

#body {
    background: rgb(33, 133, 197) url('images/escheresque_ste.png');
    margin: auto;   
    top: 30px;
}

#submit {
    width: 155px;
    float: right;
}

#register {
    vertical-align: middle;
    margin: auto;
}

但目前我不知道它是否与IE浏览器兼容，因为它使用了一些新的CSS3样式。还要注意我对CSS3 / CSS有点新意，但是如果你们能帮助我，我会非常感激。 这里是HTML / PHP（不要抱怨过时的PHP我正在使用它）：

<?php
    //Connects to the Database
    include ('db.php');
    //Starts a query to fetch the data from the table
    $data = mysql_query("SELECT * FROM hf_osu") or die(mysql_error());
    if(!$data) {
        echo "3rr0rz";
        exit;
    }

?>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css.css">
        <link href='http://fonts.googleapis.com/css?family=Lobster|Fjalla+One|Julius+Sans+One|Passion+One:400,700,900|Lobster+Two:400,400italic,700,700italic|Open+Sans+Condensed:300,300italic,700&subset=latin,latin-ext,cyrillic-ext,cyrillic,vietnamese,greek,greek-ext' rel='stylesheet' type='text/css'>
    </head>
    <body id="body">
                <div id="buttonbox">
                    <a href="/register.php" target="_blank" id="button">Register here</a>
                </div>
                <!--Writes the table and data.-->
                <table id="table1">
                            <th>Hackforums Name</th>
                            <th>Osu! name</th>
                    <?php while($info = mysql_fetch_array($data)) : ?>
                        <tr>
                            <td><a href="<?php echo $info['Hackforums_PLink'] ?>"><?php echo $info ['Hackforums_UName'] ?></a></td>
                            <td><a href="<?php echo $info['Osu_PLink'] ?>"><?php echo $info ['Osu_UName'] ?></a></td>
                        </tr> 
                    <?php endwhile; ?>
                </table>
                <!--<table id="table1">
                        <tr >
                            <th>Hackforums Name</th>
                            <th>Osu! Name</th>
                        </tr>
                        <tr>
                            <td><a href="http://www.hackforums.net/member.php?action=profile&uid=1096116">agsking</a> </td> <td><a href="http://osu.ppy.sh/u/agsking">agsking</a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.hackforums.net/member.php?action=profile&uid=746220">Hentai</a> </td><td> <a href="http://osu.ppy.sh/u/hfhentai">HFHentai</a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.hackforums.net/member.php?action=profile&uid=1464743">Kirito</a> </a></td> <td><a href="http://osu.ppy.sh/u/ScumbagSup">ScumbagSup</a></td>
                        </tr>   
                        <tr>
                            <td><a href="http://www.hackforums.net/member.php?action=profile&uid=1074228">Ryuuji Takasu</a> </td> <td><a href="http://osu.ppy.sh/u/Plainside">Plainside</a></td>
                        </tr>
                </table>-->
    </body>
</html>

Answer 1

CSS3支持Internet Explorer 6,7和8

  

这是什么？

     

IE-CSS3是一个脚本，可为即将推出的CSS3标准中提供的一些新样式提供Internet Explorer支持。

Read

selectivizr

Answer 2

CSS tricks，有关于如何仅添加IE样式表的非常好的文章，请记住，您必须为此创建一个全新的样式表。但我发现它非常有用。