2011-09-01 69 views
0

我有一个特定的问题,并通过搜索了很多问题找到解决方案,但我似乎无法解决它。问题如下:定位在IE7稍微偏离(像10px顶部和右侧)

页面上有主要的“wrapper”div(为了居中理由),里面有一些文本,图像和一些包含(页脚,页眉等)。图像使用“position:absolute”,并使用CSS“top”和“left”属性来抵消它们。然而,Firefox和Internet Explorer 7似乎开始从不同的角度偏移,这意味着大多数图像在IE7中只有大约10px和10px的多一些。

我已经做了什么来确保; - 验证我的HTML与W3C验证(固定的一切) - 试图取代位置:绝对;有一些立场:亲戚; - 包装的位置已被设置为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; 
} 

在此先感谢再次的人谁可以帮助我!

+0

我试图删除一些由一个要素之一,看看这样做的时候有任何变化。删除包含(没有效果)的包装(没有效果)比div id =“bg”用于第二个BG(没有效果),并最终删除.body属性,但这也没有做任何改变。大多数图像仍然有点(像10,15px)off – Kiwi1

+0

由于XML-Prolog('<?xml ...'),您的文档在IE7中处于怪异模式。如果您将其移除并在标准模式下工作,它会有帮助吗? – RoToRa

+0

哦,我甚至没有注意到我还有XML-Prolog,谢谢你。即使如此,当我删除它,但很遗憾没有解决我的问题... – Kiwi1

回答

0

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

http://html5boilerplate.com/

+0

谢谢你的回答。我试过你的解决方案,但不幸的是它不工作。我浏览了网站,发现他们正在使用名为NORMALIZE.CSS的.css文件来保留有用的浏览器默认设置。也许我应该尝试那个? – Kiwi1

+0

嗯,还没有尝试正常化,但你可以试试它.. –

相关问题