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

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

  •  1
  • 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 年前
        1
  •  3
  •   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)

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