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

IE7 中的定位稍微偏离（如顶部和右侧 10px）

发布于 2024-12-02 11:22:51 字数 3164 浏览 1 评论 0原文

我有一个特定的问题，并搜索了很多问题来找到解决方案，但我似乎无法解决它。问题如下：

页面上有主要的“包装”div（出于居中原因），其中有一些文本、图像和许多包含内容（页脚、页眉等）。图像使用“position:absolute”并使用CSS“top”和“left”属性来偏移它们。然而，Firefox 和 Internet Explorer 7 似乎从不同的点开始偏移，这意味着 IE7 中的大多数图像仅向下约 10 像素，向右多 10 像素

。 - 使用 W3C 验证器验证我的 html（修复了所有问题） - 尝试替换位置：绝对；具有某种地位：亲属； - 包装器的位置已设置为position:relative； - 不想只为 IE7 使用特定的样式表（所以没有尝试） - PS：使用meta http-equiv =“X-UA-Compatible”content =“IE = EmulateIE7”让我的IE8浏览器显示我的项目就像在IE7中一样

我真的希望你能帮助我！提前致谢，特此给出相应的 HTML 和 CSS

HTML:

 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>

 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

 <title>
 Document Title 
 </title>

 <link rel='stylesheet' type="text/css" href="includes/mainmenu/Mainmenustyle.css"/>
 <link rel='stylesheet' type="text/css" href="includes/header_main/header_mainstyle.css"/>
 <link rel='stylesheet' type="text/css" href="includes/footer_main/footer_mainstyle.css"/>
 <link rel='stylesheet' type="text/css" href="Homepagestyle.css"/>

 </head>

 <body>

 <div id="bg"></div>
 <div id="wrapper">

 <div>
 <!--#include virtual="includes/mainmenu/mainmenu.html" -->
 </div>

 <div>
 <!--#include virtual="includes/header_main/header_main.html" -->
 </div>

 <div id="about_us" class="about_us">
 <p>Some text.</p></div>

 <a href="portfolio/graphic/fotoanne.shtml" class="rollover" title="FotoAnne"><span class="displace"></span></a>

 <div id="aboutgreyhorsenl_title" class="aboutgreyhorsenl_title">
 <img src="images/aboutnl_image.png" alt="About Greyhorse"/></div>


 <div>
 <!--#include virtual="includes/footer_main/footer_main.html" -->
 </div>

</div>
</body>
</html>

CSS:

#wrapper{
position:relative;
z-index: 1;
margin:10px auto;
width:1100px;
}

#bg {
   width: 100%;
   height: 614px; 
   position: absolute;
   top: 93px;
   left: 0;
   background-image: url(images/stripe.png);
   background-repeat: repeat-x repeat-y;
   background-attachment: scroll;
} 

body {
background-image:url(images/Background_Homepage.png);
background-attachment: scroll;
background-repeat: repeat-x;
background-position: top;
font-family: arial;
color: #111111;
font-size: 0.75em; /* 12px/16=0.75 em */
word-spacing: 2px;
line-height: 175%;
}

.about_us {
display: block;
width: 420px;
height: 12px;
position: absolute;
left:290px;
top:-110px;
}

.aboutgreyhorsenl_title {
position: absolute;
top: 280px;
left: 400px;
}

a.rollover {
display: block;
width: 155px;
height: 115px;
text-decoration: none;
background: url("images/FotoAnne_thumbnail.png");
position: absolute;
left:735px;
top:-100px;
}

a.rollover:hover {
background-position: 775px 0;
}

.displace {
position: absolute;
left:287px;
top:-205px;
}

再次感谢任何可以帮助我的人！

原文

I have a certain problem and searched through a lot of questions to find a solution but I just can not seem to fix it. The problem is as following:

There is the main "wrapper" div on the page (for centering reasons), and inside this is some text, images and a number of includes (footer, header etc.). The images are using "position: absolute" and using the CSS "top" and "left" property to offset them. However, Firefox and Internet Explorer 7 seem to start their offset from a different point, meaning the most of the images are just about 10px lower and 10px more to the right in IE7

What I've done to make sure;
- validated my html with the W3C validator (fixed everything)
- tried to replace position:absolute; with some position:relative;
- The position of the wrapper has been set as position:relative;
- would rather not want to work with a a specific stylesheet just for IE7 (so didn't try that)
- PS: used meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" to let my IE8 browser shows my project like it was in IE7

I'm really hoping you could help me out! Thanks in advance and hereby i'm giving the corresponding HTML and CSS

HTML:

 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>

 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

 <title>
 Document Title 
 </title>

 <link rel='stylesheet' type="text/css" href="includes/mainmenu/Mainmenustyle.css"/>
 <link rel='stylesheet' type="text/css" href="includes/header_main/header_mainstyle.css"/>
 <link rel='stylesheet' type="text/css" href="includes/footer_main/footer_mainstyle.css"/>
 <link rel='stylesheet' type="text/css" href="Homepagestyle.css"/>

 </head>

 <body>

 <div id="bg"></div>
 <div id="wrapper">

 <div>
 <!--#include virtual="includes/mainmenu/mainmenu.html" -->
 </div>

 <div>
 <!--#include virtual="includes/header_main/header_main.html" -->
 </div>

 <div id="about_us" class="about_us">
 <p>Some text.</p></div>

 <a href="portfolio/graphic/fotoanne.shtml" class="rollover" title="FotoAnne"><span class="displace"></span></a>

 <div id="aboutgreyhorsenl_title" class="aboutgreyhorsenl_title">
 <img src="images/aboutnl_image.png" alt="About Greyhorse"/></div>


 <div>
 <!--#include virtual="includes/footer_main/footer_main.html" -->
 </div>

</div>
</body>
</html>

CSS:

#wrapper{
position:relative;
z-index: 1;
margin:10px auto;
width:1100px;
}

#bg {
   width: 100%;
   height: 614px; 
   position: absolute;
   top: 93px;
   left: 0;
   background-image: url(images/stripe.png);
   background-repeat: repeat-x repeat-y;
   background-attachment: scroll;
} 

body {
background-image:url(images/Background_Homepage.png);
background-attachment: scroll;
background-repeat: repeat-x;
background-position: top;
font-family: arial;
color: #111111;
font-size: 0.75em; /* 12px/16=0.75 em */
word-spacing: 2px;
line-height: 175%;
}

.about_us {
display: block;
width: 420px;
height: 12px;
position: absolute;
left:290px;
top:-110px;
}

.aboutgreyhorsenl_title {
position: absolute;
top: 280px;
left: 400px;
}

a.rollover {
display: block;
width: 155px;
height: 115px;
text-decoration: none;
background: url("images/FotoAnne_thumbnail.png");
position: absolute;
left:735px;
top:-100px;
}

a.rollover:hover {
background-position: 775px 0;
}

.displace {
position: absolute;
left:287px;
top:-205px;
}

Thanks in advance again for anyone who could help me out!

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

扫码二维码加入Web技术交流群

发布评论

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

评论（1）

雨落星ぅ辰 2024-12-09 11:22:51

html5boilerplate 中的 style.css 文件将使所有浏览器具有相同的“默认”设置。将此 css 文件添加到您的网站（作为第一个加载的文件）可能会解决该问题。

http://html5boilerplate.com/

the style.css file from the html5boilerplate will make all browsers have the same 'default' settings.. adding this css file to your site (as the first one to be loaded), might fix the issue.

http://html5boilerplate.com/

回复 原文
~没有更多了~

关于作者

不喜欢何必死缠烂打

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文