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

Question

Я получил эту страницу, и у меня есть некоторые проблемы с т. Е. <7 и Opera 7.11 </p>

Это - это то, что я надеялся использовать в качестве макета во всех браузерах, и вместо этого это IE: то есть 5,5 и т.е. *

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;
}

Живая версия

здесь , но после того, как я ее исправил, она готова - вот причина длинных кодов в посте.

Answer 1

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

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

Edit: Есть несколько вещей, которые вы можете сделать, чтобы исправить 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, которые проверяют, в каком режиме отображается текущая страница, но основной способ избежать режима причуд заключается в том, чтобы перед * тип документа и строгий тип документа.

Answer 2

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

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

Итак, проблема была в следующем: то есть <7 не подобрал правильную высоту для элементов ul # nav и div # main-in. Добавление стиля: высота: 100%; для них решена проблема. </p>

Answer 3

IE никогда не был известен своей поддержкой CSS (он печально известен за его отсутствие поддержки и его ошибки) ... Но если вы действительно хотите поддерживать старые версии IE, я рекомендуем использовать условные комментарии , чтобы добавить дополнительные CSS-файлы для специфических особенностей старых версий. Но прежде чем применять конкретный CSS, попробуйте сделать чистый HTML настолько семантическим, насколько это возможно, сделайте его макет почти таким, каким вы хотите его без CSS, а затем стилизуйте его впоследствии.

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

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

Answer 4

Правильно ли делайте разметку и CSS для нынешних / будущих браузеров ... но для исправления конкретных версий IE я бы порекомендовал создать отдельный файл css и только с условной ссылкой на них . Таким образом, вам не нужно путать свой хороший дизайн или CSS-файлы с хакерами.

Также снимайте для IE6, но не беспокойтесь о IE5. Сейчас это менее 0,1% рынка: http://www.w3schools.com/browsers/browsers_stats.asp

Answer 5

Начните с исправления ошибок проверки . Я знаю, что глупо ожидать, что IE 5.5 будет следовать стандартам, но это может помочь Opera. Еще одна вещь, о которой стоит подумать - нужна ли вам поддержка этих древних браузеров?

Answer 6

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

Или вы можете просто перенаправить пользователей этих браузеров на более простую версию веб-сайта.

Answer 7

Взгляните на урезанный макет, который работает, например, на A List Apart . Начните с рабочего макета, такого как этот, а затем отредактируйте его по своему вкусу. Я считаю, что это проще, чем пытаться исправить сломанный макет.