1. 首頁
  2. 問答
  3. 僅限IE瀏覽器的CSS隻影響IE中的頁面，而不影響其他瀏覽器

僅限IE瀏覽器的CSS隻影響IE中的頁面，而不影響其他瀏覽器

2013-02-25 134 views
0

我正在使用的網頁在除IE以外的其他瀏覽器中工作正常。我正在使用IE 10（預覽版），所以我可以使用陰影，而<br />不工作，所以我做了一個特定於IE的css，這樣如果瀏覽器是IE，它就會加載IE的CSS。那麼，當我去改變.homepagetable的頁邊距時，它也會將CSS應用到其他瀏覽器。 main.css和all-ie-only.css之間的區別是.homepagetable。僅限IE瀏覽器的CSS隻影響IE中的頁面，而不影響其他瀏覽器

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

來源

2013-02-25 Christopher Bennett

+2

警告：您的代碼非常容易受到SQL注入攻擊，並且存在許多其他明顯的安全漏洞。另外，請注意'mysql_xxx（）'函數已被棄用;建議改爲更新的'mysqli'或'PDO'庫。 – SDC 2013-02-25 14:26:54

+0

我還沒有寫完，它只是我的高級項目。我正在建立一個社交網絡，它只是成爲一種產品，並且可能不會在互聯網上使用，除了一天之內沒有任何重要的東西被存儲。 @SDC – 2013-02-25 14:38:07

+0

你是否使用了「ie-only樣式表」？那裏有很多。此外，只是一個提示：你不需要重複所有其他的東西。你可以有一個主樣式表，然後一個用於IE的僅覆蓋需要的內容 – naomi 2013-02-25 14:45:57

回答

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目前在怪癖模式下運行。在您的<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。

來源

2013-02-25 14:47:03

+0

我會盡力實施安全更新，但可能需要一些時間。對於''，我需要澄清它是什麼類型的文件，如果是的話，我可以把php嗎？感謝您的幫助。還有一個問題。 CSS中的陰影使文本與IE中搜索框的背景顏色相同，但在Chrome中它們不會。我該如何改變它？感謝您的答覆。 – 2013-02-25 15:02:26

+0

我去了開發者工具，並把它從怪癖中解救出來，因爲即使我在'之前'有''，它仍然會加載怪癖 – 2013-02-25 15:13:10

相關問題

 相關問題