仅IE的css仅影响IE中的页面，而不影响其他浏览器中的页面

时间：2013-02-25 14:12:42

标签： php internet-explorer google-chrome

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

的index.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;
}

所有-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;
}

1 个答案:

答案 0 :(得分：0)

你一定要听@ 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目前正在以怪癖模式运行。在<!DOCTYPE>之前立即删除<html>应解决问题。然后，您不需要使用条件。

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

<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。

相关问题
最新问题