爲什麼我的佈局工作在IE <6但不是IE> 7？

我在Mac上開發，所以我依靠模擬器進行IE測試。據netrenderer（http://ipinfo.info/netrenderer/），我的佈局（這自然適用於我安裝的Safari瀏覽器& Firefox版本）在IE6及更低版本中可用，但在IE7及更高版本中不可用。爲什麼我的佈局工作在IE <6但不是IE> 7？

請注意，我沒有測試過這與一個實際的IE安裝 - 只與netrenderer。它表明，儘管存在一些較小的字體大小問題，但在IE6及更低版本中，它主要起作用：「菜單」位於左側，「內容」位於右側，背景圖像顯示爲「菜單」。在IE 8 & 9 divs坐在彼此的頂部，在IE7的「菜單」div被推到最右邊。在7,8和9中，沒有背景圖像顯示「菜單」。

我創建了一個測試頁面，簡化內容，並內置到這裏頭相關的樣式：http://www.steph-morris.com/test.html

我已經通過W3C驗證運行它，它驗證罰款。我已經嘗試過在各種容器上使用位置變化，正如很多StackOverflow IE定位解決方案所建議的那樣，我們無濟於事。我希望在瀏覽器兼容性戰爭中一些經歷過激烈的老將能夠看一看它，讓我知道爲什麼我選擇的佈局概念不適用於IE，並指出我的方向可接受的黑客或替代品。

來源

2011-08-23 Ila

說實話，你已經列出了測試儀有似乎有點躲閃。我會嘗試使用適當的瀏覽器，或者您可以嘗試[瀏覽器實驗室]（https://browserlab.adobe.com/en-us/index.html#state=use;url=http%3A%2F%2Fwww.steph -morris.com％2Ftest.html; view = 0; zoom = 100; browsers = OSXSF5000％2CWXPIE6000％2CWXPIE7000％2CWXPIE8000％2CWXPIE9000％2CWXPFF4000）來自adobe。在IE7和IE8中，你仍然有輕微的問題。IE9看起來沒問題，IE6看起來像壞消息 – LeeR

你很可能是正確的瀏覽器測試儀閃避！正試圖避免Adobe的瀏覽器實驗室的閃光湯。現在已經在那裏跑過了，除了IE7-將菜單div向右移動外，一切都看起來不錯（或者至少是功能性的）。 – Ila

這是前一段時間了，但我注意到你的鏈接仍然有效（並且仍然呈現出破碎的佈局）...

我有一個快速瀏覽一下這一點，我認爲問題的關鍵在於你的CSS中。我沒有時間仔細觀察，但我確實設法通過更改在IE9/8/7和FF中工作的一些行來快速繪製出網站的基本版本。

希望這有助於:)

<!DOCTYPE HTML> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>Steph Morris | TEST</title> 

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Puritan"> 

<style> 

body {background:#ffcc33 url('http://www.steph-morris.com/images/other_bg.jpg'); font:13px/1.5 Helvetica} 

#menu {width:170px; float:left; margin-right:1em} 
#logo{} 
#logo h1{} 
#logo h1 a{color:#000; text-decoration:none; font-family:'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif} 

#middle_left ul { 
font-family: 'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif; 
font-size: 13px; 
list-style:none; 
padding:0; 
color:#000} 

#other {float:left; width:600px;} 
#other h1 { 
font-family: 'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif; 
font-size: 35px; 
padding-right: 15px; 
padding-top: 15px; 
margin:0; 
} 
#other_text {padding:25px;} 
#other_content {width:600px; height:600px; background: url("http://www.steph-morris.com/images/other_square.jpg") no-repeat scroll center top transparent} 
</style> 

</head> 

<body>  
<div id="container_other"> 
    <div id="menu"> 
     <div id="menu_left"> 
      <div id="top_left"> 
       <div id="logo"><h1><a href="#">Steph Morris</a></h1></div> 
      </div> 
      <div id="middle_left"> 
       <ul> 
        <li><div><a href="#">The Start</a></div></li> 
        <li><div><a href="#">About</a></div></li> 
        <li><div><a href="#">The Novel</a></div></li> 
        <li><div><a href="#">Translation/Übersetzung</a></div></li> 
        <li class="current"><div><a href="#">Around</a></div></li> 
       </ul> 
      </div> 
      <div id="bottom_left"> 
       <p class="contact"><a href="mailto:[email protected]">Contact:<br>[email protected]<br>stephmorris.com</a></p> 
      </div> 
     </div> 
    </div> 
    <div id="other" class=""> 
     <h1 class="veolay">Other Works</h1> 
     <div id="other_content"> 
      <div id="other_text" class="veolay"><p>Due to absolute positioning, we need to define the height of the slideshow DIV. Also, notice that we defined three different z-indexes&mdash;we will manipulate these soon using jQuery.</p> 
      <p>For the slideshow animation we are going to switch between each photo at a set rate. So let&rsquo;s start by writing a function that brings in a new photo on top of the last active image:</p> 
     </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

來源

2012-05-23 11:08:59 Gillian

爲什麼我的佈局工作在IE <6但不是IE> 7？

回答

相關問題