代码之家 › 专栏 › 技术社区 › CJM

定位错误<ie8-为什么?最佳解决方案?

positioning internet-explorer css

CJM · 技术社区 · 16 年前

我注意到我正在维护的一个站点在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黑客,我需要做什么来更改IE7及以下版本的行为?

我也读过,良好的重新设置样式表可以避免许多这些问题,所以为了一个笑,我应用了EricMeyer的 Reset Reloaded 样式表——正如预期的那样,它显著地借用了站点。

综上所述,问题到底是什么;什么是最好的长期解决方案,什么是最容易部署的解决方案,给出了问题的短期性质?

css('banner02'): http://new.eminox.com/_lib.css/content.css

1 回复 | 直到 16 年前

CodingWithSpike 16 年前

实际上,我认为你的问题不在于“banner02”的位置,而在于顶部的“banner01”分区的高度。我在FF和IE7中打开了该网站,并将页面的上边缘对齐。图像“banner02”处于完全相同的高度位置,但头段“banner01”在一个浏览器中高于另一个浏览器。我还认为IE7是在“怪癖模式”下运行的,它稍微改变了盒子模型。

为了使FF和IE7看起来相同(很抱歉,我没有安装IE8,这是我的工作PC,因此我不能安装很多来检查它们),我做了两个更改:

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)

为我清理了一切…但是,我只在两个浏览器中测试了它。希望有帮助!