IEのスタイル問題

Question

私はCSSスタイルシートを使用しているWebページを持っています。 localhostでページを実行すると、IE、Firefox、Google Chromeで正常に動作します。

しかし、私がページとCSSシートをアップロードすると、IEでは動作しませんが、FirefoxとGoogle Chromeで動作します。

これは私のページのコードです：

<div id="container"> 
    <div id="header"> 
    <h1><a href="../index.html"><img src="../img/logo.png" alt="rattle me" class="png" /></a></h1> 
    <div> 
    </div> 
    <br class="clear" /> 
    <?php 
     if(isset($_POST['err'])) 
      echo "<script>alert('Invalid Captcha ...')</script>"; 
    ?></div> 
    <div id="content"> 
    <div class="text"> 
     <h2>Support</h2> 
    <form action="verify.php" id="contact" onsubmit="return validateForm();" method="post"> 
    <div id="form"> 
      <table> 
     <tr style="height:75px"> 
      <td><div style="width:75px">Name:</div></td> 
      <td><div class="input"><input type="text" value="<?php echo (isset($_POST['usrName']))?$_POST['usrName']:"Your Name"; ?>" name="contact[name]" id="contactName" onfocus="clearInputValue(this,'Your Name')" onblur="setInputValue(this,'Your Name')"/></div></td> 
     </tr> 
     <tr style="height:75px"> 
      <td><div>Email:</div></td> 
      <td><div class="input"><input type="text" value="<? echo (isset($_POST['usrEmail']))?$_POST['usrEmail']:"Your E-Mail"; ?>" name="contact[email]" id="contactEmail" onfocus="clearInputValue(this,'Your E-Mail')" onblur="setInputValue(this,'Your E-Mail')"/></div></td> 
     </tr> 
     <tr style="height:75px"> 
      <td><div>Phone:</div></td> 
      <td><div class="input"><input type="text" value="<? echo (isset($_POST['usrPhone']))?$_POST['usrPhone']:"Your Phone Number"; ?>" name="contact[phone]" id="contactPhone" onfocus="clearInputValue(this,'Your Phone Number')" onblur="setInputValue(this,'Your Phone Number')"/></div></td> 
     </tr> 
     <tr style="height:150px"> 
      <td><div>Message:</div></td> 
      <td height="50px"><textarea type="text" style="width:263px; height:25px; font:bold 14px Arial, Helvetica, sans-serif; color:#9F9F9F; outline:0 none; background:none; padding:9px 10px 75px 10px;" name="contact[message]" id="contactMessage" onfocus="clearInputValue(this,'Your Message')" onblur="setInputValue(this,'Your Message')"><? echo (isset($_POST['usrMsg']))?nl2br($_POST['usrMsg']):"Your Message"; ?></textarea></td> 
     </tr> 
     <tr style="height:75px"> 
      <td><div>Human Verification:</div></td> 
      <td> 
       <?php 
        require_once('recaptchalib.php'); 
        $publickey = "6Le4hb8SAAAAAKyDYU31NJ1KsROl4sxUW90coeea"; 
        echo recaptcha_get_html($publickey); 
       ?> 
      </td> 
     </tr> 
     <tr style="height:75px"> 
      <td colspan="2"><div class="input" style="background:none"><button type="submit"><span class="button large">Submit</span></button></div></td> 
     </tr> 
    </table> 
    </div> 
    </form> 
    </div> 
    </div> 
    <div class="push"></div> 
    <div class="push"></div> 
    <div class="push"></div> 
    <div class="push"></div> 
    <div class="push"></div> 
    <div class="push"></div> 
    <div class="push"></div> 
    <div class="push"></div> 
    <div class="push"></div> 
    <div class="push"></div> 
    <div class="push"></div> 
    <div class="push"></div> 
    <div class="push"></div> 
    <div class="push"></div> 
    <div class="push"></div> 
</div> 
<div id="footer"> 
    <div class="wrap"> 
    <ul> 
     <li><a href="../index.html">Home</a> .</li> 
     <li><a href="../terms-of-service.html">Terms of Service</a> .</li> 
     <li><a href="../privacy-policy.html">Privacy Policy</a></li> 
    </ul> 
    </div> 
</div> 

、これが私のCSSファイルです：

html, body { 
    height: 100%; 
} 
body { 
    background: url(../../img/bg.jpg) repeat-x top #f0f0f0; 
    color:#000; 
    font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; 
} 
a { 
    color:#5f2f80; 
} 
.left { 
    float:left 
} 
.right { 
    float:right 
} 
.clear { 
    display:block; 
    clear:both; 
    visibility:hidden; 
    height:0px; 
    border-width:0; 
    margin:0; 
    padding:0; 
    font-size: 0px; 
} 

.button, .button:visited { 
    background: #d46f1d url(../../img/overlay.png) repeat-x; 
    display: inline-block; 
    padding: 5px 15px 5px; 
    color: #fff; 
    text-decoration: none; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); 
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); 
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25); 
    border-bottom: 1px solid rgba(0,0,0,0.25); 
    position: relative; 
    cursor: pointer; 
    text-transform:uppercase; 
} 
.button:hover { 
    background-color:#ff6600; 
} 
.small.button, .small.button:visited { 
    font-size: 11px 
} 
.button, .button:visited, 
.medium.button, .medium.button:visited  { 
    font-size: 15px; 
    font-weight: bold; 
    line-height: 1; 
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25); 
} 
.large.button, .large.button:visited { 
    font-size: 20px; 
    padding: 6px 18px 5px; 
} 
.super.button, .super.button:visited   { 
    font-size: 36px; 
    padding: 8px 24px 9px; 
} 

#container { 
    width:660px; 
    margin:0 auto; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -50px; 
} 
#header { 
    padding:20px 0; 
} 
#header h1 img { 
    display:block; 
    float: left; 
} 
#header div { 
    float: right; 
    width: 424px; 
    padding-top: 84px; 
} 
#header p { 
    font-weight: bold; 
    font-size: 18px; 
} 
#header p span { 
    color: #5f2f80; 
} 
#content { 
    padding-bottom:20px; 
} 
#content .box { 
    padding-top:20px; 
} 
#content .box p { 
    text-align:justify; 
} 
#content p { 
    line-height:140%; 
    padding-bottom:12px; 
} 
#content h2 { 
    font-size:18px; 
    padding-bottom:18px; 
} 
#content #swf { 
    width:640px; 
    margin:0 auto 20px auto; 
    border:solid 10px #85796F; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 
#content #swf object { 
    display:block; 
} 
#content .text { 
    float:left; 
    width:424px; 
    line-height:140%; 
} 
#content .text h6 { 
    font-size:14px; 
    padding-bottom:14px; 
} 
#content .text .input { 
    background:url(../../img/bg-input.gif) no-repeat; 
    width:263px;         
    height:27px;         
    display:block;         
    float: left; 
    padding:9px 10px 0 10px;            
} 
#content .text .input input { 
    border:0;     
    background:none;   
    width:100%;     
    text-align:center;   
    font:bold 14px Arial, Helvetica, sans-serif; 
    outline:0 none;        
    color: #9F9F9F;        
} 
#content .text button { 
    float: right; 
    background:none; 
    border:0; 
    cursor:pointer; 
} 

#content .app { 
    float:right;  
} 
#content .app img { 
    display:block; 
} 

#footer, .push { 
    height: 50px; 
} 
#footer { 
    border-top:solid 1px #85796F; 
} 
#footer .wrap { 
    width: 660px; 
    margin: 0 auto; 
} 
#footer .img { 
    float: right; 
    padding-top:15px; 
} 
#footer ul { 
    text-align:left; 
    padding-top:15px; 
} 
#footer ul li { 
    display:inline; 
    color:#57247b; 
} 
#footer ul li a { 
    letter-spacing:normal; 
    text-decoration:none; 
    color:#57247b; 
} 
#footer ul li a:hover { 
    color:#000; 
} 

Answer 1

私は、彼らがIE9を設定したかについてはよく分からないが、私は自動的にそのIE8を知っています「イントラネット」ゾーンの任意のサイトに対して互換モードを有効にしました。このゾーンにあるローカルマシン上のサイトを表示しているときに、互換モードが有効になっている可能性はありますか？