2

このページを取得しましたが、ie < 7 と Opera 7.11 に問題があります。

これは私がすべてのブラウザでのレイアウトになりたいと思っていたものであり、これらは代わりに 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;
}

ライブバージョンはここにありますが、修正した後は動きません。これが、投稿の長いコードの背後にある理由です。

4

7 に答える 7

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 が quirks モードに移行しないことを確認してください。現在のページがどのモードでレンダリングされているかをテストする簡単な JavaScript スニペットがありますが、クワーク モードを回避する主な方法は、doctype の前に何も( <?xmlprolog タグでさえも) なく、doctype が厳密であることを確認することです。

于 2008-11-25T10:14:37.490 に答える
2

IE はその CSS サポートで決して有名ではありませんでした (サポートの欠如とバグで悪名高いです)...しかし、古いバージョンの IE を本当にサポートしたい場合は、条件付きコメントを使用して、特定の癖に対応する CSS ファイルを追加することをお勧めします。古いバージョンの。ただし、特定の css を適用する前に、純粋な HTML を可能な限り意味のあるものにしてみてください。そのレイアウトは、CSS を使用せずにほぼ希望どおりにしてから、後でスタイルを設定してください。

また、Yahoo のYUI Reset CSSをチェックすることをお勧めします。これにより、一貫したスタイリングがはるかに簡単になります。私が実際に使用したときに、大規模なプロジェクトを適切に見せるために、IE7 専用の 3 行の CSS を追加するだけで済みました (!)。ところで、常に標準に従ってコーディングし、最初に Firefox、Opera、または Safari でテストし、後で IE でテストしてください。

Opera 7 はかなり古いものです。ほとんどの Opera ユーザーは、IE ユーザーよりも頻繁にブラウザーを更新していると思います (実際にブラウザーを切り替えることを選択したため)。

于 2008-11-25T10:04:31.440 に答える
2

私はie 5.5とopera 7がなくても生きていけるが、ie 6は重要だ。

私はすでにreset.cssを使用しており、条件付きスタイルを確実に使用できます。

したがって、問題は次のとおりでした: ie<7 は、ul#nav 要素と div#main-in 要素の正しい高さを取得しませんでした。スタイルの追加: 高さ: 100%; 彼らに問題を解決しました。

于 2008-11-25T12:03:47.127 に答える
0

まあ、あなたの CSS は問題なく、W3C でも検証されますが、問題は古い IE ブラウザーにあります。これらのブラウザーで CSS を機能させるには、醜いコードで CSS をハックする必要があります。

または、これらのブラウザーのユーザーを単純なバージョンの Web サイトにリダイレクトすることもできます。

于 2008-11-25T09:55:08.370 に答える
0

A List Apart のように機能する簡素化されたレイアウトを見てみましょう。このような作業レイアウトから始めて、好みに合わせて編集します。これは、壊れたレイアウトを修正しようとするよりも簡単だと思います。

于 2008-11-25T09:52:20.293 に答える
0

検証エラーを修正することから始めます。IE 5.5 が標準に従うことを期待するのはばかげていることはわかっていますが、Opera には役立つかもしれません。他に考慮すべきことは、これらの古いブラウザーを本当にサポートする必要があるかどうかです。

于 2008-11-25T11:37:00.240 に答える
0

現在/将来のブラウザーに合わせてマークアップと CSS を正しく実行してください...ただし、特定のバージョンの IE を修正するには、個別の css ファイルを作成し、条件付きでのみ参照することをお勧めます。こうすれば、優れたデザインや CSS ファイルをハッキングでごちゃごちゃにする必要はありません。

また、IE6 用に撮影しますが、IE5 について心配する必要はありません。現在、市場の 0.1% 未満です: http://www.w3schools.com/browsers/browsers_stats.asp

于 2008-11-25T11:58:04.503 に答える