定位错误 <IE8 - 为什么？最好的解决方法？答案

【问题标题】：Positioning Bug <IE8 - Why? Best workaround?定位错误 <IE8 - 为什么？最好的解决方法？
【发布时间】：2014-01-15 12:33:38
【问题描述】：

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

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

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

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

问题的原因是什么？

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

最好的解决方案是什么？

许多消息来源表明，使用条件 cmets 包含 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

【问题讨论】：

标签： css internet-explorer positioning

【解决方案1】：

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

为了让 FF 和 IE7 看起来一样（对不起，我没有安装 IE8，这是我的工作电脑，所以我不能安装很多东西来检查它们），我做了 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 个浏览器中对其进行了测试。希望对您有所帮助！

【讨论】：

我回去看了看DOCTYPE，把它放回你原来的样子，banner01和02仍然排成一列，所以我想你可以忽略我上面的#1。对不起！我想这取决于IE8喜欢什么......
从技术上讲，该页面的编码不正确，因为文档类型为 HTML，而代码为 XHTML。实际上这并不重要，因为浏览器使用 tagoup 解析器。
从积极的方面来说，您的建议在 IE7/8/Chrome2/FF3.5 中表现良好。那么为什么明确定义banner01 的高度会产生如此大的差异呢？如果呈现相同的内容，我会（愚蠢地）期望两者的高度相同。
@Mr Shiny - 你是对的，但是尾部的斜杠在空元素中被忽略了。但是，请相信我，与最初由供应商（营销公司）提供的网站相比，此页面是一件艺术品。
@Rally：我很好奇为什么你（最初）建议回归到过渡样式表......还有为什么你认为它会在 IE7 上以怪异模式运行 - AFAIK 它应该几乎可以运行IE7 上的 -standards-mode（虽然我今天没有明确确认）。