如何使这个网站独立于浏览器

Question

我得到这个页面，并有一些问题，即< 7和歌剧7.11

This是什么，我希望在所有浏览器的布局，这些都是IE的人，而不是：ie 5.5和ie 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--这就是后面的长代码背后的原因。

Answer 1

看看可以使用的精简版式，例如A List Apart。 从这样的工作布局开始，然后根据自己的喜好进行编辑。我发现这比试图修复破损的布局更容易。

Answer 2

那么，你的CSS就好，它甚至在W3C验证，问题是与旧的IE浏览器。你必须用丑陋的代码破解你的CSS才能在这些浏览器中工作。

或者您可以将这些浏览器的用户重定向到更简单的网站版本。

Answer 3

IE从来没有著名的CSS支持（这是一个以缺乏支持，其错误臭名昭著）......但如果你真的想支持老版本的IE，我建议你使用conditional comments添加额外的CSS文件，用于旧版本的特定怪癖。但是在应用特定的css之前，尽量将纯HTML尽可能地语义化，使其布局几乎不需要CSS就可以实现，然后再设置风格。

我也建议您查看雅虎的YUI Reset CSS这使得一致的造型lot更容易。实际上，我只需添加3行专门用于IE7的CSS，以便在使用它（！）时使大型项目看起来不错。顺便说一下：始终按照标准进行编码，首先在Firefox，Opera或Safari中进行测试，然后在IE中进行测试。

Opera 7相当古老，我想大多数Opera用户更新他们的浏览器比IE用户更频繁（因为他们实际上已经选择切换浏览器）。

Answer 4

你真的需要支持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是严格的。

Answer 5

从修复validation errors开始。我知道期望IE 5.5遵循标准是愚蠢的，但它可能对Opera有帮助。其他要注意的是是否真的需要来支持这些古老的浏览器。

Answer 6

为现在/将来的浏览器做正确的标记和CSS ...但要修复特定版本的IE，我会建议制作一个单独的 css文件，而且只有conditionally referrencing them。这样，您就不必用黑客篡改好设计或CSS文件。

此外，拍摄IE6，但不担心IE5。它现在低于市场的0.1％：http://www.w3schools.com/browsers/browsers_stats.asp

Answer 7

我可以生活没有，即5.5，歌剧7，但即6是重要的。

我已经在使用reset.css，并且我确定可以使用条件样式。

所以问题是如下：即< 7没有拿起ul＃nav和div＃main-in元素的正确高度。添加样式：高度：100％;给他们解决了这个问题。