如何使这个 CSS 与 IE 浏览器兼容？ [关闭]答案

【问题标题】：How to make this CSS compatible with IE browsers? [closed]如何使这个 CSS 与 IE 浏览器兼容？ [关闭]
【发布时间】：2013-03-03 22:41:53
【问题描述】：

我有这个 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>

【问题讨论】：

是的，抱歉，我们不会调试大约 200 行 CSS，我们甚至没有为您提供 HTML。
您没有提及 IE 的版本，也没有提及您遇到的问题。更具体，也许发布一个链接/JS小提琴，你可能会得到一些建议。
如果您打开网站 valclan.tk/osu/，您会注意到所有样式都不适用于页面对齐。

标签： css cross-browser compatibility

【解决方案1】：

对 Internet Explorer 6、7 和 8 的 CSS3 支持

这是什么？

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

Read

selectivizr

【讨论】：

@deceze 抱歉太快没有点击回复按钮...对不起兄弟..

【解决方案2】：

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

【讨论】：