定位错误<IE8 - 为什么？最佳解决方法？

我注意到我正在维护的网站在FF/IE8/Chrome中存在一个小的布局错误（例如，在this page中） - 左上角的图像有点高，偏离顶部的标题。定位错误<IE8 - 为什么？最佳解决方法？

我想知道为什么当我接管网站时我没有注意到它，但是我意识到它只有在我将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黑客，我需要做些什么来改变IE7及以下版本的行为？

我也读过很好的重置样式表可以避免很多这些问题，所以为了发笑，我申请了Eric Meyer的Reset Reloaded样式表 - 正如预期的那样，它显着地使站点生效。

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

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

来源

2009-06-17 CJM

其实，我觉得你的心不是问题用“banner02”的定位，取而代之的则是与“banner01”在顶部DIV的高度。我在FF和IE7中打开了该网站，并排列了页面的顶部边缘。图片“banner02”的高度位置完全相同，但是标题div“banner01”在一个浏览器中比另一个更高。我也认为IE7运行在“怪癖模式”，稍微改变了盒子模型。

为了使FF和IE7看起来是一样的（对不起，我没有安装IE8，这是我的工作电脑，所以我不能去安装一个多检查他们全部），我做了2个变化：

1） ~~更改DOCTYPE从：~~ < - 这可能不是neccecary。看到我下面的评论。

<!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）

那cl为我而生......但我再次只在2个浏览器中测试过它。希望这有助于！

来源

2009-06-17 13:55:48 CodingWithSpike

我回去看了DOCTYPE，把它放回原来的样子，并且banner01和02仍然排队，所以我认为你可以忽略上面的＃1。抱歉!我想这取决于IE8喜欢什么...... – CodingWithSpike 2009-06-17 14:01:13

定位错误<IE8 - 为什么？最佳解决方法？

回答

相关问题