2011-09-11 91 views
2

我的網站目前在ie7,ie8和ie9中分幾頁,當然它在每個瀏覽器中以不同的方式打破。我一直試圖弄清楚這幾個小時,什麼也沒有。IE顯示浮動錯誤

ie7-8中的問題是我的各種元素沒有正確地浮動我相信,但我不完全確定。

這裏有一些screencaps

這裏是一個測試頁面的鏈接:testsite

這裏是代碼:

<?php include("includes/header.html");?> 

    <div id="content">  
     <div id="toolbar" class="dropshadow" style="background-color: #181818"> 
      <h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1> 
      <h2 class="header2">Buyers Tools:<h2> 
      <hr noshade color = "#373737"/> 

      <ul> 
       <li> 
        <a href="inventory.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Showroom','','images/toolbar/carhover.png',1)"> 
         <img src="images/toolbar/car.png" alt="Showroom" name="Showroom" width="89" height="55" border="0" id="Showroom" style="margin-left: 7px;"/> 
           <h3>Our Vehicles</h3> 
         </a> 
        </li> 
       <li> 
        <a href="shipping.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Shipping','','images/toolbar/shippinghover.png',1)"> 
         <img src="images/toolbar/shipping.png" alt="Shipping" name="Shipping" width="97" height="55" border="0" id="Shipping" /> 
          <h3>Shipping</h3> 
         </a> 
        </li> 
       <li> 
        <a href="financing.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Financing','','images/toolbar/financinghover.png',1)"> 
         <img src="images/toolbar/financing.png" alt="Financing" name="Financing" width="89" height="55" border="0" id="Financing" /> 
           <h3>Financing</h3> 
          </a> 
        </li> 
       <li> 
        <a href="insurance.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Insurance','','images/toolbar/insurancehover.png',1)"> 
         <img src="images/toolbar/insurance.png" alt="Insurance" name="Insurance" width="64" height="55" border="0" id="Insurance" /> 
            <h3>Insurance</h3> 
           </a> 
        </li>  
       <li> 
        <a href="auto-locator.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('AutoLocator','','images/toolbar/autolocatorhover.png',1)"> 
         <img src="images/toolbar/autolocator.png" alt="AutoLocator" name="AutoLocator" width="104" height="55" border="0" id="AutoLocator" /> 
          <h3>Auto Locator</h3> 
         </a> 
        </li> 
       </ul> 
      </div> 

     <div id="searchbox" class="dropshadow"> 


      </div> 

     <div id="advsearch" class="dropshadow"> 

       </div> 




     <div id="links" class="dropshadow" style="background-color: #181818"> 

      </div> 


     </div> 
    </div>     
     <div id="bannerads" class="dropshadow"> 
      </div> 

下面是具體到這個頁面的CSS表。如果您需要網站的主頁,我可以爲您提供,但該樣式表在其他頁面上正常工作,所以我相信問題出在這裏。

@charset "utf-8"; 
/* CSS Document */ 

#bannerads{ 
    margin: 9px 0px 5px 6px; 
    float: left; 
    width: 728px; 
    height: 90px; 
    padding: 6px 128px; 

    background-color: #e9e7e4; 
} 
#toolbar{ 
    float: left; 
    width: 984px;  
    height: 150px; 
    position: relative; 
    z-index: 1; 
    margin: 0px 6px 0px 6px; 
    background-color: #181818; 
    background-image: url(../images/toolbar.png); 
    background-position:right top; 
    background-repeat:no-repeat; 
} 
#toolbar hr{ 
    float: left; 
    width: 600px; 
    margin: 4px 300px 0px 30px 
} 
#toolbar ul{ 
    list-style:none; 
    padding:0; 
} 
#toolbar li{ 
    float: left; 
    margin: 10px 0px 0px 31px; 
} 
#toolbar a{ 
    color: #e9e7e4; 

} 
#toolbar a:hover{ 
    color:#e9e7e4; 
    text-decoration:underline; 
} 
#searchbox{ 
    float: left; 
    clear: both; 
    width: 446px; 
    height: 402px; 
    background-color: #e9e7e4; 
    margin: 9px 6px 0px 6px; 
    padding: 10px 20px 10px 20px; 
} 
#toolbar li h3{ 
    color: #e9e7e4; 
    font-size: 13px; 
    margin-top: 4px; 
    margin-bottom: 10px; 
    text-align:center; 
} 
#advsearch{ 
    float: left; 
    width: 446px; 
    height: 242px; 
    background-color: #e9e7e4; 
    margin: 9px 6px 0px 6px; 
    padding: 10px 20px 10px 20px; 
} 

#links{ 
    float: left; 
    width: 446px; 
    height: 132px; 
    background-color: #181818; 
    margin: 8px 6px 0px 6px; 
    padding: 10px 20px 10px 20px; 
} 
#arrow{ 
    margin-left:-93px; 
    width: 68px; 
    height: 135px; 
    float: left; 
    position: relative; 
} 
.header1{ 
    color: #e9e7e4; 
    font-size: 28px; 
    margin: 8px 0px 0px 30px; 
    float: left; 

} 
.header2{ 
    color: #e9e7e4; 
    font-size: 16px; 
    float:left; 
    margin: 22px 0px 0px 220px; 
} 

#showinvheader{ 
    color: #e9e7e4; 
    font-size: 14px; 
    margin-bottom: -2px; 
    text-align:center; 
} 

最後,這裏是我使用兼容即CSS表:

/* CSS Document */ 

.Navigation{ 
    border: solid #181818 1px; 
    margin: -15px 5px 0px 5px; 
} 
.bigbox{ 
    border: solid #181818 1px; 
    margin: 7px 5px 0px 5px; 
} 
.smallbox{ 
    border: solid #aaa 1px; 
    margin: 7px 5px 0px 5px; 
} 
#banner{ 
    border: solid #181818 1px; 
    margin: -1px 5px 0px 5px; 
} 
#headerimg{ 
    border: solid #181818 1px; 
    margin: -1px 5px 0px 5px; 
} 
#contentbox{ 
    border: solid #aaa 1px; 
    margin: 7px 5px 0px 5px; 
    } 
#bannerads{ 
    border: solid #aaa 1px; 
    margin: 7px 5px 0px 5px; 
    } 
#bannerads2{ 
    border: solid #aaa 1px; 
    margin: 7px 5px 0px 5px; 
    } 
#toolbar{ 
    border: solid #181818 1px; 
    margin: -1px 5px 0px 5px; 
} 
#featured{ 
    border: solid #aaa 1px; 
    margin: 7px 5px 0px 5px; 
    } 
#searchbox{ 
    border: solid #aaa 1px; 
    margin: 7px 5px 0px 5px; 
    } 
#advsearch{ 
    border: solid #aaa 1px; 
    margin: 7px 5px 0px 5px; 
    } 
#links{ 
    border: solid #181818 1px; 
    margin: 7px 5px 0px 5px; 
    } 
+0

請給出URL。屏幕截圖沒有用處。 –

+0

請將您給我們的代碼僅限於與問題相關的代碼。我們不需要擁有整個應用程序。 – 2011-09-11 20:57:50

+0

chromeframe時間? ;) –

回答

2

嗯,首先,你的X-UA-Compatible標頭被弄亂了。你有一個奇怪的quot;價值在那裏。這可能會阻止新版本呈現爲IE7。但是,您應該始終以標準模式呈現,並使用條件註釋爲每個瀏覽器進行細微更改。

如果您必須使用x-ua兼容,那麼您應該將其作爲http標頭,而不是作爲元標記。 PHP允許您在開始將數據寫入客戶端之前添加插件。在那裏添加標題。

經過進一步檢查,您的代碼是..廢話。它有180多個驗證錯誤,包括像在塊頭元素中放置塊級別的元素。我會建議讓你的HTML在任何其他事情之前進行驗證,因爲無效代碼是在不同瀏覽器上呈現不同內容的首要原因。

http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fspecialtysales.nfshost.com%2flookingtobuy2.php

+1

開頭的,你不明白你幫了我多少! – pzuraq

+0

+1指出應該是什麼(但對我來說不是)顯而易見的。 –

0

好了,對不起了這麼久,我寫這...

的代碼是錯誤的原因是,一個頭標記沒有得到關閉。

<h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1> 
      <h2 class="header2">Buyers Tools:<h2> 

因此,如果您遇到類似問題,請確保您的代碼全部關閉。