Как сделать этот сайт браузер независимого

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> 

-что я считаю - релевант 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, а затем создайте его позже.

Я также рекомендую вам ознакомиться с Yahoo YUI Reset CSS, который делает согласованный стиль aлот проще. На самом деле мне пришлось добавить только 3 строки CSS специально для IE7, чтобы сделать большой проект в порядке, когда я использовал его (!). И кстати: всегда код по стандартам, и сначала тестируйте в Firefox, Opera или Safari, тестируйте позже в IE.

Opera 7 довольно старая, я думаю, большинство пользователей Opera чаще обновляют свои браузеры, чем пользователи IE (так как они действительно сделали выбор для переключения браузеров).

Answer 4

У вас действительно необходимо поддерживать IE5.5? Это кажется ненужным болезненным. Если вы явно не делаете это для клиента, который использует браузер, вы можете в значительной степени предположить, что каждый использует IE6 или более поздней версии.

Поддержка CSS в IE6 является шероховатой и почти несуществующей в версиях IE старше этого.Ваш лучший выбор для таких древних браузеров может состоять в том, чтобы просто показать отдельную версию сайта для этих

Редактировать: Есть несколько вещей, которые вы можете сделать, чтобы исправить IE. Условные комментарии могут быть использованы для добавления конкретных JavaScript и CSS хаки для различных версий IE, а также следующие файлов, в частности, сделать много, чтобы добавить недостающую функциональность:

<!--[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, которые проверяют, в каком режиме выполняется текущая страница, но основной способ избежать режима причуд - обеспечить, чтобы ничего (даже тег пролога <?xml) до doctype, и что 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

Я могу жить без ie 5.5, а опера 7, но то, что важно 6.

Я уже использую reset.css, и я уверен, что это могут быть условные стили.

Таким образом, проблема заключалась в следующем: то есть < 7 не поднял правильную высоту для основных элементов ul # nav и div #. Добавление стиля: высота: 100%; для них решена проблема.