Css 在IE7中的定位稍微偏离(如10px顶部和右侧)
我有一个特定的问题,通过搜索大量的问题来找到解决方案,但我似乎无法解决它。问题如下: 由于居中的原因,页面上有一个主包装div,其中有一些文本、图像和一些包括页脚、页眉等的内容。。这些图像使用position:absolute并使用CSS top和left属性来偏移它们。然而,Firefox和InternetExplorer7似乎从一个不同的点开始偏移,这意味着在IE7中,大多数图像的右边略低10px,右边略高10px 我做了什么来确保; -使用W3C验证程序验证我的html修复了所有问题 -尝试替换位置:绝对位置;有一些位置:相对的; -包装器的位置已设置为位置:相对; -我不想只为IE7使用特定的样式表,所以没有尝试 -PS:使用meta http equiv=X-UA-Compatible content=IE=EmulateIE7让我的IE8浏览器像在IE7中一样显示我的项目 我真的希望你能帮我!提前感谢,在此我将给出相应的HTML和CSS HTML:Css 在IE7中的定位稍微偏离(如10px顶部和右侧),css,internet-explorer-7,positioning,Css,Internet Explorer 7,Positioning,我有一个特定的问题,通过搜索大量的问题来找到解决方案,但我似乎无法解决它。问题如下: 由于居中的原因,页面上有一个主包装div,其中有一些文本、图像和一些包括页脚、页眉等的内容。。这些图像使用position:absolute并使用CSS top和left属性来偏移它们。然而,Firefox和InternetExplorer7似乎从一个不同的点开始偏移,这意味着在IE7中,大多数图像的右边略低10px,右边略高10px 我做了什么来确保; -使用W3C验证程序验证我的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>
再次感谢所有能帮助我的人 HTML5样板文件中的style.css文件将使所有浏览器具有相同的“默认”设置。。将此css文件作为第一个加载的文件添加到您的站点,可能会解决此问题
谢谢你的回答。我尝试了你的解决方案,但不幸的是没有成功。但我浏览了整个网站,发现他们现在使用一个名为NORMALIZE.css的.css文件来保留有用的浏览器默认值。也许我应该试试那个?我试着一个接一个地删除一些元素,看看这样做时是否有任何变化。删除了includes no effect than wrapper no effect than用于第二个bg no effect的div id=bg,并最终删除了.body属性,但这也没有做任何更改。由于XMLProlog的缘故,大多数图像仍然有点像1015px,我甚至没有注意到我还有XMLProlog,谢谢。即便如此,当我删除它时,不幸的是它并没有解决我的问题……好吧,我想我已经找到了一个部分解决方案,尽管它更像是给我自己的一个建议。我发现最好避免绝对定位,除非我把一切都安排得恰到好处且可控。我更喜欢使用一些浮子,最终用边距、填充物等将它们移动到位。如果我错了,请纠正我,我仍然是一个新手。感谢您的帮助避免绝对定位通常是个好主意。
#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;
}