1

我注意到我正在维护的一个网站在 FF/IE8/Chrome 中存在一个小布局错误（例如在此页面上） - 左上角的图像有点高，误入顶部的标题。

我想知道为什么当我接管该站点时我没有注意到它，但我意识到它只是在我将 IE7 升级到 IE8 之后才变得明显 - 显然这个问题早就存在于“正确的”浏览器中。

对于这些“正确”的浏览器，这个绝对定位的图像需要将 top 属性设置为 59px，而不是 IE7（及更低版本）需要的 56px。

解决方案很简单，但是 a) 我想先了解问题，b) 我想考虑一系列解决方案（我知道会有不止一个）。考虑到这一点...

  • 问题的原因是什么？

很多定位问题是由于错误的IE框模型，但我认为这已经被IE7修复了。它是仍然影响 IE7 的盒子模型问题还是不同的东西？

  • 什么是最好的解决方案？

许多消息来源建议使用条件注释来包含 IE7 补丁 CSS 文件是要走的路：

<!--[if lte IE 7]>
 <link href="IE7Fix.css" rel="stylesheet" type="text/css">
<![endif]-->

直截了当，但我宁愿不必将其插入网站上每个页面的标题中（但如果必须的话，我当然会这样做）。

我知道有许多 CSS hack 可能可以完成这项工作，但有一种学派认为应该避免使用 CSS，因为它们更难维护，尤其是在新的浏览器出现时。我当然可以同情这种心态；但是，该站点将在 3 个月内完全重新开发，因此我正在寻找一个短期解决方案。如果我选择使用 CSS hack，我需要做些什么来改变 IE7 及更低版本的行为？

我还读到好的重置样式表可以避免许多这些问题，所以为了一笑，我应用了 Eric Meyer 的Reset Reloaded样式表 - 正如预期的那样，它严重破坏了网站。

回顾一下，到底是什么问题？什么是最好的长期解决方案，什么解决方案最容易部署，给出问题的短期性质？

CSS（'Banner02'）：http ://new.eminox.com/_lib.css/content.css

实际上，我认为您的问题不在于“banner02”的定位，而是“banner01”div 顶部的高度。我在 FF 和 IE7 中打开了站点，并在页面的顶部边缘对齐。图像“banner02”的高度位置完全相同，但标题 div“banner01”在一个浏览器中比另一个浏览器高。我还认为 IE7 以“怪癖模式”运行，这稍微改变了盒子模型。

为了让 FF 和 IE7 看起来一样（对不起，我没有安装 IE8，这是我的工作 PC，所以我不能安装太多来检查它们），我做了 2 处更改：

1)将 DOCTYPE 更改为： <-- 这可能不是必需的。请参阅下面的评论。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

到：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2) 为“banner01”定义一个高度，因为之前没有设置（在 Global.css 中）：

.banner01 {
  width: 770px;
  height: 48px;
  background-color: white;
  border-color: #555555;
  border-style: solid;
  border-width: 10px 0 1px 0;
}

（横幅 02 为 59px，因此我们选择高度 48，因为 48 + 10px 上边框 + 1px 下边框 = 59px）

这为我清除了它......但同样，我只在 2 个浏览器中测试了它。希望这会有所帮助！

4

1 回答 1

3

实际上，我认为您的问题不在于“banner02”的定位，而是“banner01”div 顶部的高度。我在 FF 和 IE7 中打开了站点，并在页面的顶部边缘对齐。图像“banner02”的高度位置完全相同，但标题 div“banner01”在一个浏览器中比另一个浏览器高。我还认为 IE7 以“怪癖模式”运行，这稍微改变了盒子模型。

为了让 FF 和 IE7 看起来一样（对不起，我没有安装 IE8，这是我的工作 PC，所以我不能安装太多来检查它们），我做了 2 处更改：

1)将 DOCTYPE 更改为： <-- 这可能不是必需的。请参阅下面的评论。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

至：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2) 为“banner01”定义一个高度，因为之前没有设置（在 Global.css 中）：

.banner01 {
  width: 770px;
  height: 48px;
  background-color: white;
  border-color: #555555;
  border-style: solid;
  border-width: 10px 0 1px 0;
}

（横幅 02 为 59px，因此我们选择高度 48，因为 48 + 10px 上边框 + 1px 下边框 = 59px）

这为我清除了它......但同样，我只在 2 个浏览器中测试了它。希望这会有所帮助！

于 2009-06-17T13:55:48.140 回答