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

当前位置：文江博客话题详情

CSS internet-explorer positioning

定位错误

发布于 2024-07-24 00:47:53 字数 1366 浏览 1 评论 0 原文

我注意到我正在维护的一个网站在 FF/IE8/Chrome 中存在一些布局错误（位于此页面） - 左上角的图像有点高，偏离了顶部的标题。

我想知道为什么我在接管该网站时没有注意到它，但我意识到自从我将 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 hack，我需要做什么来更改 IE7 及更低版本的行为？

我还读到，良好的重置样式表可以避免许多此类问题，因此为了一笑，我应用了 Eric Meyer 的重置 Reloaded 样式表 - 正如预期的那样，它显着破坏了网站。

回顾一下，问题到底是什么？考虑到问题的短期性质，什么是最佳的长期解决方案？什么解决方案最容易部署？

CSS ('Banner02'): http://new.eminox.com/_lib.css /内容.css

原文

I noticed that a site I'm maintaining had a little layout bug in FF/IE8/Chrome (on this page for example) - the image in the top left hand was a little high, straying into the header at the top.

I wondered why I hadn't notice it when I took over the site, but I realise it has only since I upgraded IE7 to IE8 that it had become apparent - obviously the problem will have long since exist in 'proper' browsers.

For these 'proper' browsers, this absolutely positioned image need the top attribute to be set to 59px, as opposed to the 56px that IE7 (and below) require.

A solution is easy, but a) I want to understand the problem first, and b) I would like to consider a range of solutions (I know there will be more than one). With that in mind...

What is the cause of the problem?

A lot of positioning problems were due to the erroneous IE box model, but I thought this had been fixed by IE7. Is it a box model issue that still affects IE7 or is it something different?

What is the best solution?

A number of sources suggest that using condition comments to include a IE7 patch CSS file is the way to go:

<!--[if lte IE 7]>
 <link href="IE7Fix.css" rel="stylesheet" type="text/css">
<![endif]-->

Straightforward, but I'd rather not have to insert that into the header of every single page on the site (but of course I will if I have to).

I know that there are numerous CSS hacks that could probably do the job, but there is a school thought that says that CSS should be avoided because they are harder to maintain, especially as new browsers emerge. I can certainly sympathise with this mindset; however, this site is getting redeveloped entirely in within 3 months so I'm looking at a short-term solution. If I were to choose to employ a CSS hack, what do I need to do to change the behaviour for IE7 and below?

I've also read that good reset stylesheets can avoid many of these problems, so for a laugh, I applied Eric Meyer's Reset Reloaded stylesheet - as expected, it borked the site significantly.

So to recap, what exactly is the problem; what is the best long-term solution, and what solution would be easiest to deploy, give the short-term nature of the problem?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤凫 2024-07-31 00:47:53

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

为了使 FF 和 IE7 看起来一样（抱歉，我没有安装 IE8，这是我的工作电脑，所以我无法安装太多来检查它们），我做了 2 个更改：

1) ~~更改 DOCTYPE from:~~ <-- 这可能不是必要的。请参阅下面的评论。

<!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 的高度为 59 像素，因此我们选择 48 的高度，因为 48 + 10px 顶部边框 + 1px 底部边框 = 59px)

这对我来说很清楚......但同样，我只在 2 个浏览器中测试了它。希望这有帮助！

Actually, I think your problem isnt with the positioning of 'banner02', instead it is with the height of 'banner01' div across the top. I opened the site in FF and IE7 and lined up the top edge of the page. The image 'banner02' is in exactly the same height position, but the header div 'banner01' was taller in one browser than the other. I also think IE7 was running in 'quirks mode' which was slightly changing the box model.

To make FF and IE7 look the same (sorry I dont have IE8 installed, and this is my work PC so I can't go install a much to check them all), I made 2 changes:

1) ~~change the DOCTYPE from:~~ <-- this probably isn't neccecary. see my comment below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2) define a height for 'banner01', because none was previously set (in Global.css):

.banner01 {
  width: 770px;
  height: 48px;
  background-color: white;
  border-color: #555555;
  border-style: solid;
  border-width: 10px 0 1px 0;
}

(banner 02 is at 59px, so we choose a height of 48 because 48 + 10px top border + 1px bottom border = 59px)

That cleared it up for me... but again, I only tested it in 2 browsers. Hopefully that helps!

回复收藏 0 原文

~没有更多了~