2008-11-25 79 views
2

我得到這個頁面,並有一些問題,即< 7和歌劇7.11如何使這個網站獨立於瀏覽器

This是什麼,我希望在所有瀏覽器的佈局,這些都是IE的人,而不是:ie 5.5ie 6.0

的XHTML很簡單:

print "<div id=\"page\"> 
    <div id=\"header\"> 
    <ul id=\"nav\"> 
     <li><a href=\"/\" class=\"first\">Címlap<div>Az oldal címlapja</div></a></li> 
     <li><a href=\"/blog\">Blogok<div>Minden bejegyzés</div></a></li> 
     <li><a href=\"/friss\">Friss tartalom<div>Aktuális témák</div></a></li> 
    </ul> 
    </div> <!-- header --> 
    <div id=\"main\"><div id=\"main-in\"> 
    <div id=\"right\">"; 
     do_boxes(); 
print " 
    </div> <!-- right --> 
    <div id=\"left\">"; 
     do_content(); 
print"</div> <!-- left --> 

</div></div><!-- main --> </div>"; 

凡從職位和崗位上做出了內容的樣子:

<div class="post"> 
     <h2><a href="/blog/2/252/newcastleben-betiltottak-a-ketreces-tojast">Newcastleben betiltották a ketreces tojást</a></h2> 
     <div class="author">warnew | 2008. october 16. 20:26 </div> 
     <p>Az angliai Newcastle Városi Tanácsa kitiltotta a ketreces baromfitartásból származó tojásokat az iskolai étkeztetésből, személyzeti éttermekből, rendezvényekről es a "hospitality outletekből".</p> 

     <p>A ketreces csirke- és pulykahúst még nem tiltották be, de vizsgálják a kérdést, ahogy a <a href="http://en.wikipedia.org/wiki/Halal">Halal</a> hús és a ketreces tojásból készült sütemények és tésztafélék tiltását is.</p> 

     <ul class="postnav"> 
     <li><a href="/blog/2/252/newcastleben-betiltottak-a-ketreces-tojast%7D">Tovább</a></li> 
     <li><a href="/blog/2/252/newcastleben-betiltottak-a-ketreces-tojast#comments">Hozzászólások (0)</a></li> 
     </ul> 
    </div> <!-- post --> 

和盒子是這樣的:

<div id="ownadbox" class="box"> 
    <h5>Viridis matrica</h5> 
    <a href="http://viridis.hu/blog/2/172/nepszerusits-minket" title="Népszerűsíts minket"><img src="http://viridis.hu/files/viridis_matrica_jobb.png" alt="viridis matrica"/></a> 
</div> 

- 我的想法是 - relevan css:

body { 
    background  : transparent url(/images/design/background.png) repeat; 
} 

#page { 
    margin   : 0px auto; 
    width   : 994px; 
    background  : transparent url(/images/design/header.jpg) no-repeat top left; 
} 
div#header { 
    width   : 746px; 
    margin   : 0px auto; 
} 
div#header ul#nav { 
    padding-top  : 170px; 
    margin-left  : 3px; 
    margin-right : 3px; 
    border-bottom : #896e51 solid 7px; 
    overflow  : hidden; 
} 

div#header ul#nav li { 
    display   : block; 
    float   : left; 
    width   : 120px; 
    margin-bottom : 7px; 
} 

div#main { 
    width   : 746px; 
    margin   : 0px auto; 
} 

div#main div#main-in { 
    padding   : 30px 20px; 
    background  : transparent url(/images/design/content-background.png) repeat-y top left; 
    overflow  : hidden; 
} 
div#main div#main-in div#left { 
    width   : 460px; 
    overflow  : hidden; 
    float   : left; 
} 

div#main div#main-in div#left div.post { 
    clear   : left; 
    margin-bottom : 35px; 
} 

div#main div#main-in div#right { 
    width   : 215px; 
    float   : right; 
} 

div#main div#main-in div#right div.box { 
    margin-bottom : 30px; 
    clear   : both; 
} 

現場版本是here,但在我把它修好以後,它就是gona move--這就是後面的長代碼背後的原因。

回答

0

看看可以使用的精簡版式,例如A List Apart。 從這樣的工作佈局開始,然後根據自己的喜好進行編輯。我發現這比試圖修復破損的佈局更容易。

0

那麼,你的CSS就好,它甚至在W3C驗證,問題是與舊的IE瀏覽器。你必須用醜陋的代碼破解你的CSS才能在這些瀏覽器中工作。

或者您可以將這些瀏覽器的用戶重定向到更簡單的網站版本。

+0

或重定向到http://www.getfirefox.com/ ...有一個想法。 – nickf 2008-11-25 12:11:37

+0

eheh這將是最好的選擇。 – rogeriopvl 2008-11-25 22:50:01

2

IE從來沒有著名的CSS支持(這是一個以缺乏支持,其錯誤臭名昭著)......但如果你真的想支持老版本的IE,我建議你使用conditional comments添加額外的CSS文件,用於舊版本的特定怪癖。但是在應用特定的css之前,儘量將純HTML儘可能地語義化,使其佈局幾乎不需要CSS就可以實現,然後再設置風格。

我也建議您查看雅虎的YUI Reset CSS這使得一致的造型lot更容易。實際上,我只需添加3行專門用於IE7的CSS,以便在使用它(!)時使大型項目看起來不錯。順便說一下:始終按照標準進行編碼,首先在Firefox,Opera或Safari中進行測試,然後在IE中進行測試。

Opera 7相當古老,我想大多數Opera用戶更新他們的瀏覽器比IE用戶更頻繁(因爲他們實際上已經選擇切換瀏覽器)。

8

真的需要支持IE5.5嗎?這似乎是不必要的痛苦。除非您明確地爲使用瀏覽器的客戶端執行此操作,否則幾乎可以假定每個人都使用IE6或更高版本。

IE6中的CSS支持很脆弱,而且在IE之前的版本中幾乎不存在。對於這種古老的瀏覽器最好的選擇可能只是爲那些顯示單獨版本的網站

編輯: 你可以做一些事情來修補IE。有條件的註釋可用於添加各種版本的IE,尤其是以下文件特定的JavaScript和CSS黑客,做了很多在缺失的功能添加:

<!--[if lt IE 7]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><![endif]--> 
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]--> 

此外,要確保IE不跳入怪癖模式。有簡單的JavaScript代碼片段可以測試當前頁面正在渲染哪種模式,但避免怪異模式的主要方式是確保在doctype之前沒有(甚至沒有<?xml序言標籤),並且doctype是嚴格的。

0

從修復validation errors開始。我知道期望IE 5.5遵循標準是愚蠢的,但它可能對Opera有幫助。其他要注意的是是否真的需要來支持這些古老的瀏覽器。

2

我可以生活沒有,即5.5,歌劇7,但即6是重要的。

我已經在使用reset.css,並且我確定可以使用條件樣式。

所以問題是如下:即< 7沒有拿起ul#nav和div#main-in元素的正確高度。添加樣式:高度:100%;給他們解決了這個問題。

相關問題