IE-only css 只影响 IE 中的页面，而不影响其他浏览器答案

【问题标题】：IE-only css affect only the page in IE, and not in other browsersIE-only css 只影响 IE 中的页面，而不影响其他浏览器
【发布时间】：2013-02-10 17:07:53
【问题描述】：

我正在处理的网页在 IE 以外的其他浏览器中运行良好。我正在使用 IE 10（预览版），所以我可以使用阴影，而 <br /> 不起作用，所以我制作了一个 IE 特定的 css，如果浏览器是 IE，它会加载 IE css。好吧，当我去更改 .homepagetable 的边距时，它也会将 css 应用于其他浏览器。 main.css 和 all-ie-only.css 的区别在于 .homepagetable。

索引.php

    <? include("inc/incfiles/header.inc.php"); ?>
    <?
    $reg = @$_POST['reg'];
    //declaring variables to prevent errors
    $fn = ""; //First Name
    $ln = ""; //Last Name
    $un = ""; //Username
    $em = ""; //Email
    $em2 = ""; //Email 2
    $pswd = ""; //Password
    $pswd2 = ""; //Password 2
    $d = ""; //Sign up Date
    $u_check = ""; //Check if username exists
    //registration form
    $fn = strip_tags(@$_POST['fname']);
    $ln = strip_tags(@$_POST['lname']);
    $un = strip_tags(@$_POST['username']);
    $em = strip_tags(@$_POST['email']);
    $em2 = strip_tags(@$_POST['email2']);
    $pswd = strip_tags(@$_POST['password']);
    $pswd2 = strip_tags(@$_POST['password2']);
    $d = date("y-m-d"); // Year - Month - Day

    if ($reg) {
    if ($em==$em2) {
    // Check if user already exists
    $u_check = mysql_query("SELECT username FROM users WHERE username='$un'");
    // Count the amount of rows where username = $un
    $check = mysql_num_rows($u_check);
    if ($check == 0) {
    //check all of the fields have been filled in
    if ($fn&&$ln&&$un&&$em&&$em2&&$pswd&&$pswd2) {
    // check that passwords match
    if ($pswd==$pswd2) {
    // check the maximum length of username/first name/last name does not exceed 25 characters
    if (strlen($un)>25||strlen($fn)>25||strlen($ln)>25) {
    echo "The maximum limit for username/first name/last name is 25 characters!";
    }
    else
    {
    // check the length of the password is between 5 and 30 characters long
    if (strlen($pswd)>30||strlen($pswd)<5) {
    echo "Your password must be between 5 and 30 characters long!";
    }
    else
    {
    //encrypt password and password 2 using md5 before sending to database
    $pswd = md5($pswd);
    $pswd2 = md5($pswd2);
    $query = mysql_query("INSERT INTO users VALUES ('','$un','$fn','$ln','$em','$pswd','d','0')");
    die("<h2>Welcome to Rebel Connect</h2>Login to your account to get started.");
    }
    }
    }
    else {
    echo "Your passwords don't match!";
    }
    }
    else 
    {
    echo "Please fill in all fields";
    }
    }
    else
    {
    echo "Username already taken.";
    }
    }
    else {
    echo "Your e-mails don't match!";
    }
    }
    ?>
    <?
    //Login Script
    if (isset($_POST["user_login"]) && isset($_POST["password_login"])) {
        $user_login = preg_replace('#[^A-Za-z0-9]#i', '', $_POST["user_login"]); // filter everything but numbers and letters
        $password_login = preg_replace('#[^A-Za-z0-9]#i', '', $_POST["password_login"]); // filter everything but numbers and letters
        $password_login=md5($password_login);
        $sql = mysql_query("SELECT id FROM users WHERE username='$user_login' AND password='$password_login' LIMIT 1"); // query the person
        //Check for their existance
        $userCount = mysql_num_rows($sql); //Count the number of rows returned
        if ($userCount == 1) {
            while($row = mysql_fetch_array($sql)){
                $id = $row["id"];
        }
             $_SESSION["id"] = $id;
             $_SESSION["user_login"] = $user_login;
             $_Session["password_login"] = $password_login;
             exit("<meta http-equiv=\"refresh\" content=\"0\">");
             } else {
             echo 'That information is incorrect, try again';
             exit();
        }
    }
    ?>
    <table class="homepageTable">
            <tr>
                <td width="60%" valign="top">
                 <h2>Already a member? Login below.</h2>
                 <form action="index.php" method="post" name="form1" id="form1">
                    <input type="text" size="25" name="user_login" id="user_login" placeholder="username" />
                    <br />
                    <input type="password" size="25" name="password_login" id="password_login" placeholder="password" />
                    <br />
                    <input type="submit" name="button" id="button" value="Login to your account!">
                 </form>
                </td>
                <td width="40%" valign="top">
                 <h2>Sign up below...</h2>
                <form action="#" method="post">
                <input type="text" size="25" name="fname" placeholder="First Name" value="<? echo $fn; ?>">
                <input type="text" size="25" name="lname" placeholder="Last Name" value="<? echo $ln; ?>">
                <input type="text" size="25" name="username" placeholder="Username" value="<? echo $un; ?>">
                <input type="text" size="25" name="email" placeholder="Email" value="<? echo $em; ?>">
                <input type="text" size="25" name="email2" placeholder="Re-enter Email" value="<? echo $em2; ?>">
                <input type="password" size="25" name="password" placeholder="password" value="<? echo $pswd; ?>">
                <input type="password" size="25" name="password2" placeholder="Re-enter Password" value="<? echo $pswd2; ?>"><br />
                <input type="submit" name="reg" value="Sign Up!">
                </form>
                </td>
            </tr>
    </table>
    </body>
    </html>

header.inc.php

<?
include ("inc/scripts/mysql_connect.inc.php");
session_start();
if (!isset($_SESSION["user_login"])) {

}
else
{
header("location: home.php");
}
?>
<html>
<head>
<if !IE>
<link href="css/main.css" rel="stylesheet" type="text/css">
<if IE>
<link rel="stylesheet" type="text/css" href="css/all-ie-only.css" />
<title>Rebel Reach - PHS Student Social Network</title>
</head>
<body>
<div class="headerMenu">
      <div id="wrapper">
            <div class="logo">
                  <img src="img/find_friends_logo.png">
            </div>
            <div class="search_box">
                  <form method="get" action="search.php" id="search">
                  <input name="q" type="text" size="60" placeholder="Search..." />
                  </form>
            </div>
            <div id="menu">
                  <a href="#">Home</a>
                  <a href="#">About</a>
                  <a href="#">Sign Up</a>
                  <a href="#">Login</a>
            </div>
      </div>
</div>
<br />
<br />
<br />
<br />

main.css

* {
    margin: 0px;
    padding: 0px;
    font-family: Arial;
    font-size: 12px;
    background-color: #eff5f9
}
.headerMenu {
    background-image:url(../img/menu_bg.png);
    height: 56px;
    border-bottom: 0px;
    width: 100%;
    position:fixed;
}
#wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    padding-top: 0px;
    padding-bottom: 0px;
    background-image:url(../img/menu_bg.png);
}
.logo {
    margin-left: 0px;
    width: 125px;
}
.logo img {
    padding-top: 7px;
    width: 150px;
    height: 38px;
    background-image:url(../img/menu_bg.png);
}
.search_box {
    background-image: url(../img/menu_bg.png);
    position: absolute;
    top: 13px;
    margin-left: 150px;
    border:inset 2px
}
#search input[type="text"] {
    background: url(../img/search-white.png) no-repeat 10px 6px #666;
    outline: none;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    width: 350px;
    padding: 6px 15px 6px 35px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    margin-bottom: 0px;
    margin-top: 0px;
}
#search input[type="text"]:focus {
    background: url(../img/search-dark.png) no-repeat 10px 6px #fcfcfc;
    color: #6a6f75;
    width: 350px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width:1280px) {
    #menu {
        background-image:url(../img/menu_bg.png);
        position:absolute; top:0px; right:0px;
        height: 37px;
        padding-top: 16px;
        margin-right: 4%;
    }
}
@media screen and (min-width:1280px) {
    #menu {
        background-image:url(../img/menu_bg.png);
        position:absolute; top:0px; right:0px;
        height: 37px;
        padding-top: 16px;
        margin-right: 6%;
    }
}
@media screen and (min-width:1400px) {
    #menu {
        background-image:url(../img/menu_bg.png);
        position:absolute; top:0px; right:0px;
        height: 37px;
        padding-top: 19px;
        margin-right: 10%;
    }
}
@media screen and (min-width:1920px) {
    #menu {
        background-image:url(../img/menu_bg.png);
        position:absolute; top:0px; right:0px;
        height: 37px;
        padding-top: 19px;
        margin-right: 25%;
    }
}
#menu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    background-image:url(../img/menu_bg.png);
    background-repeat: no-repeat;
    padding-top: 16px;
    padding-bottom: 22px;
    padding-left: 10px;
    padding-right: 10px;
}
#menu a:hover {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    background-image:url(../img/menu_bg_hover_mouse_over.png);
    background-repeat: no-repeat;
    padding-top: 16px;
    padding-bottom: 22px;
    padding-left: 10px;
    padding-right: 10px;
}
h2 {
    font-family: Arial;
    font-size: 18px;
    padding: 5px;
    color: #0084C6;
}
input[type="text"] {
    background-color: #FFFFFF;
    border: 1px solid #E2E2E2;
    font-size: 15px;
    padding: 5px;
    width: 300px;
    margin-bottom: 3px;
    margin-top: 3px;
    outline:none;
}
input[type="text"]:hover {
    border: 1px solid #0084C6;
}
input[type="password"] {
    background-color: #FFFFFF;
    border: 1px solid #E2E2E2;
    font-size: 15px;
    padding: 5px;
    width: 300px;
    margin-bottom: 3px;
    margin-top: 3px;
    outline:none;
}
input[type="password"]:hover {
    border: 1px solid #0084C6;
}
input[type="submit"] {
    background-color: #006fc4;
    border: 1px solid #00508d;
    font-size: 15px;
    color: #FFFFFF;
    padding: 5px;
    margin-bottom: 3px;
    margin-top: 3px;
    border-radius: 7px;
}
.homepageTable {
    padding: 10px;
}

all-ie-only.css

* {
    margin: 0px;
    padding: 0px;
    font-family: Arial;
    font-size: 12px;
    background-color: #eff5f9
}
.headerMenu {
    background-image:url(../img/menu_bg.png);
    height: 56px;
    border-bottom: 0px;
    width: 100%;
    position:fixed;
}
#wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    padding-top: 0px;
    padding-bottom: 0px;
    background-image:url(../img/menu_bg.png);
}
.logo {
    margin-left: 0px;
    width: 125px;
}
.logo img {
    padding-top: 7px;
    width: 150px;
    height: 38px;
    background-image:url(../img/menu_bg.png);
}
.search_box {
    background-image: url(../img/menu_bg.png);
    position: absolute;
    top: 13px;
    margin-left: 150px;
    border:inset 2px
}
#search input[type="text"] {
    background: url(../img/search-white.png) no-repeat 10px 6px #666;
    outline: none;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    width: 350px;
    padding: 6px 15px 6px 35px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    margin-bottom: 0px;
    margin-top: 0px;
}
#search input[type="text"]:focus {
    background: url(../img/search-dark.png) no-repeat 10px 6px #fcfcfc;
    color: #6a6f75;
    width: 350px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}
@media screen and (max-width:1280px) {
    #menu {
        background-image:url(../img/menu_bg.png);
        position:absolute; top:0px; right:0px;
        height: 37px;
        padding-top: 16px;
        margin-right: 4%;
    }
}
@media screen and (min-width:1280px) {
    #menu {
        background-image:url(../img/menu_bg.png);
        position:absolute; top:0px; right:0px;
        height: 37px;
        padding-top: 16px;
        margin-right: 6%;
    }
}
@media screen and (min-width:1400px) {
    #menu {
        background-image:url(../img/menu_bg.png);
        position:absolute; top:0px; right:0px;
        height: 37px;
        padding-top: 19px;
        margin-right: 10%;
    }
}
@media screen and (min-width:1920px) {
    #menu {
        background-image:url(../img/menu_bg.png);
        position:absolute; top:0px; right:0px;
        height: 37px;
        padding-top: 19px;
        margin-right: 25%;
    }
}
#menu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    background-image:url(../img/menu_bg.png);
    background-repeat: no-repeat;
    padding-top: 16px;
    padding-bottom: 22px;
    padding-left: 10px;
    padding-right: 10px;
}
#menu a:hover {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    background-image:url(../img/menu_bg_hover_mouse_over.png);
    background-repeat: no-repeat;
    padding-top: 16px;
    padding-bottom: 22px;
    padding-left: 10px;
    padding-right: 10px;
}
h2 {
    font-family: Arial;
    font-size: 18px;
    padding: 5px;
    color: #0084C6;
    clear: both;
}
input[type="text"] {
    background-color: #FFFFFF;
    border: 1px solid #E2E2E2;
    font-size: 15px;
    padding: 5px;
    width: 300px;
    margin-bottom: 3px;
    margin-top: 3px;
    outline:none;
}
input[type="text"]:hover {
    border: 1px solid #0084C6;
}
input[type="password"] {
    background-color: #FFFFFF;
    border: 1px solid #E2E2E2;
    font-size: 15px;
    padding: 5px;
    width: 300px;
    margin-bottom: 3px;
    margin-top: 3px;
    outline:none;
}
input[type="password"]:hover {
    border: 1px solid #0084C6;
}
input[type="submit"] {
    background-color: #006fc4;
    border: 1px solid #00508d;
    font-size: 15px;
    color: #FFFFFF;
    padding: 5px;
    margin-bottom: 3px;
    margin-top: 3px;
    border-radius: 7px;
}
.homepageTable {
    padding: 10px;
}

【问题讨论】：

警告：您的代码极易受到 SQL 注入攻击，并且存在许多其他明显的安全漏洞。另外，请注意mysql_xxx() 函数已被弃用；建议改用较新的mysqli 或PDO 库。
我还没写完，只是为了我的高级项目。我正在建立一个社交网络，它只是一个产品，可能不会在互联网上使用，除非有一天，其中不会存储任何重要的东西。 @SDC
你用谷歌搜索过“ie-only stylesheet”吗？那里有很多。另外，只是一个提示：您不需要重复所有其他内容。您可以拥有一个主样式表，然后一个用于 IE 的仅覆盖所需内容的样式表
@naomi 我有，我尝试使用其中的一些，它们可以在加载 ie-specific.css 的范围内工作，但是当浏览器是 google 时，它仍然会加载 ie-specific .css。它不加载 main.css。
它实际上加载了两者。您的语法无效。

标签： php internet-explorer google-chrome

【解决方案1】：

您绝对应该听听@SDC 关于安全漏洞的评论。这是一个比跨浏览器兼容性更重要的问题。

除此之外，您的代码无法正常工作，因为：

<if !IE>
<link href="css/main.css" rel="stylesheet" type="text/css">
<if IE>
<link rel="stylesheet" type="text/css" href="css/all-ie-only.css" />

无效。

IE10 应该符合与其他浏览器相同的标准。听起来 IE10 目前正在以怪癖模式运行。在<html> 之前立即删除<!DOCTYPE> 应该可以解决问题。然后，您不需要使用条件。

如果您仍然坚持使用条件的想法，请尝试以下方法：

<link href="css/main.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/all-ie-only.css" />
<![endif]-->

但是，这包括main.css 和all-ie-only.css。

【讨论】：

我会进去尝试实施安全更新，不过可能需要一些时间。而对于<!DOCTYPE>，我是否需要澄清它是什么类型的文档，如果是的话，我是否放置php？顺便感谢您的帮助。另一个问题。 css 中的阴影使文本与 IE 中搜索框的背景颜色相同，但在 Chrome 中则不然。我该如何改变呢？顺便谢谢你的回答。
我去开发者工具并把它从怪癖中解脱出来，因为即使我在<html> 之前有<!DOCTYPE> 它仍然加载到怪癖中