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 hack，尤其是以下文件，可以添加很多缺失的功能：

<!--[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 之前没有任何内容（甚至是<?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

看看一个有效的精简布局，例如A List Apart。从这样的工作布局开始，然后根据自己的喜好对其进行编辑。我发现这比尝试修复损坏的布局更容易。

于 2008-11-25T09:52:20.293 回答
0

好吧，你的 CSS 很好，它甚至可以在 W3C 中验证，问题出在旧的 IE 浏览器上。你必须用丑陋的代码来破解你的 CSS 才能让它在那些浏览器中工作。

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

于 2008-11-25T09:55:08.370 回答
0

首先修复验证错误。我知道期望 IE 5.5 遵循标准是愚蠢的，但它可能对 Opera 有所帮助。另一件事是你是否真的需要支持这些古老的浏览器。

于 2008-11-25T11:37:00.240 回答
0

为现在/未来的浏览器正确地做你的标记和 CSS ......但要修复 IE 的特定版本，我建议制作一个单独的css 文件，并且只能有条件地引用它们。这样，您就不必用 hack 弄乱您的优秀设计或 CSS 文件。

另外，为IE6拍摄，但不要担心IE5。现在不到市场的 0.1%：http: //www.w3schools.com/browsers/browsers_stats.asp

于 2008-11-25T11:58:04.503 回答