Question

我注意到我正在维护的网站在FF / IE8 / Chrome中有一点布局错误（例如在this page上） - 左上角的图像有点高，偏向标题在顶部。

我想知道为什么当我接管网站时我没有注意到它，但我意识到只有在我将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黑客可以完成这项工作，但有一所学校认为应该避免使用CSS，因为它们更难维护，尤其是在新浏览器出现时。我当然可以同情这种心态;然而，这个网站将在3个月内完全重新开发，所以我正在寻找一个短期的解决方案。如果我选择使用CSS hack，我需要做些什么来改变IE7及以下的行为？

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

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

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

Answer 1

实际上，我认为你的问题不在于'banner02'的位置，而是在顶部的'banner01'div的高度。我在FF和IE7中打开了网站，并排列在页面的顶部边缘。图像'banner02'位于完全相同的高度位置，但标题div“banner01”在一个浏览器中比另一个更高。我还认为IE7正在以'怪癖模式'运行，这种模式略有改变。

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

1）~~更改DOCTYPE：~~ ＆lt; - 这可能不是必需的。请参阅下面的评论。

<!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个浏览器中测试过它。希望这有帮助！

定位Bug

1 个答案: