Как сделать этот сайт независимым от браузера
У меня есть эта страница, и у меня проблемы с IE <7 и Opera 7.11
Я надеялся, что Этот будет макетом во всех браузерах, а вместо него это IE: т.е. 5.5 и т.е. 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;
}
Живая версия - здесь, но после того, как я исправил ее, она перестала работать - вот причина длинных кодов в посте.
Ответы 7
Взгляните на урезанный макет, который работает, например, на Список отдельно. Начните с рабочего макета, такого как этот, а затем отредактируйте его по своему вкусу. Я считаю, что это проще, чем пытаться исправить неисправный макет.
Что ж, ваш CSS в порядке, и он даже проверяется в W3C, проблема в старых браузерах IE. Вам придется взломать свой CSS уродливым кодом, чтобы он работал в этих браузерах.
Или вы можете просто перенаправить пользователей этих браузеров на более простую версию веб-сайта.
IE никогда не был известен своей поддержкой CSS (это печально известный из-за его поддержки недостаток и его ошибок) ... Но если вы действительно хотите поддерживать старые версии IE, я рекомендую вам использовать условные комментарии для добавления дополнительных файлов CSS для определенных причуд старые версии. Но прежде чем применять конкретный CSS, попробуйте сделать чистый HTML как можно более семантическим, сделайте его макет почти таким, как вы хотите, без CSS, а затем стилизуйте его.
Я также рекомендую вам ознакомиться с Yahoo YUI Сбросить CSS, который упрощает согласованный стиль много. На самом деле мне пришлось добавить всего 3 строки CSS специально для IE7, чтобы большой проект выглядел нормально, когда я его использовал (!). И между прочим: всегда кодируйте в соответствии со стандартами и сначала тестируйте в Firefox, Opera или Safari, затем тестируйте в IE.
Opera 7 довольно старая, я предполагаю, что большинство пользователей Opera обновляют свои браузеры чаще, чем пользователи IE (поскольку они фактически решили переключить браузеры).
Вам нужен В самом деле для поддержки 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, которые проверяют, в каком режиме отображается текущая страница, но основной способ избежать режима quirks - убедиться, что перед типом документа стоит ничего такого (даже не тег пролога <?xml) и что тип документа является строгим. .
согласен, не может быть никаких веских оснований для поддержки IE5.5 на основе фактической пользовательской статистики. IE6, может быть, но стоит отказаться от этого ИМО. IE7 достаточно изворотлив, черт возьми.
+1 за решение моей - совершенно не связанной - проблемы: D Причудливый режим был ключевым словом!
Начните с исправления ошибки проверки. Я знаю, что глупо ожидать, что IE 5.5 будет соответствовать стандартам, но для Opera это может помочь. Другой вопрос, нужно ли вам В самом деле поддерживать эти древние браузеры.
Правильно выполняйте разметку и CSS для браузеров настоящего / будущего ... но для исправления конкретных версий IE я бы рекомендовал создать файл css отдельный и только условно ссылаясь на них. Таким образом, вам не придется путать свой хороший дизайн или файлы CSS с помощью хаков.
Кроме того, сделайте ставку на IE6, но не беспокойтесь об IE5. Сейчас это менее 0,1% рынка: http://www.w3schools.com/browsers/browsers_stats.asp
Могу прожить и без 5.5, и без оперы 7 но т.е 6 важна.
Я уже использую reset.css и, конечно, могу условные стили.
Итак, проблема заключалась в следующем: т.е. <7 не подобрал правильную высоту для элементов ul # nav и div # main-in. Добавляем стиль: высота: 100%; чтобы они решили проблему.
эхех, это была бы лучшая альтернатива.