我正在尝试建立一个小网站,这是一个页面,在正文中有5个堆叠的div。第一个和第二个div很好但是之后的所有div(3,4和5)都在IE9中查看网站时重复独特的背景图像。该网站在FF 20.0.1,IE10,IE 10兼容性和IE9兼容性方面运行良好,因此这个问题似乎只出现在IE9中。我已经从CSS和html中取出了所有东西,只有那5个容器,并发现我无法查明导致背景图像在第3,第4和第5 div中复制的问题。我也重复了第二个div,它也复制了第二个实例中的背景。如果有人对我所缺少的东西有任何见解,我将非常感激。 此外,我在搜索解决方案时发现了无重复和其他想法,但此时没有任何对我有用。
CSS:
* {
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
}
body {
font-family: Myriad, Arial, Helvetica, sans-serif;
}
p {
margin-bottom: 1em;
}
a {
color: #60789c;
text-decoration: none;
}
a:visited {
color: #60789c;
}
img {
border: 0;
}
body {
margin-bottom: 0px;
margin-top: 0px;
}
div#content {
margin: auto;
padding: 0;
width: 900px;
}
div#SectionOne {
Background-image: url(../images/section1.jpg);
height: 707px;
width: 100%;
}
div#SectionTwo {
Background-image: url(../images/section2.jpg);
color: #FFFFFF;
height: 1159px;
width: 100%;
}
div#SectionThree {
Background-image: url(../images/section3.jpg);
height: 668px;
width: 100%;
}
div#SectionFour {
Background-image: url(../images/section4.jpg);
height: 1385px;
width: 100%;
}
div#SectionFive {
Background-image: url(../images/section5.jpg);
height: 1165px;
width: 100%;
}
这是HTML:
<body>
<div id="content">
<div id="SectionOne">
</div>
<div id="SectionTwo">
<a name="SectionTwo" />
</div>
<div id="SectionThree">
<a name="SectionThree"/>
</div>
<div id="SectionFour">
<a name="SectionFour"/>
</div>
<div id="SectionFive">
<a name="SectionFive"/>
</div>
</div>
</body>
答案 0 :(得分:0)
关闭a
这样的<a name="SectionXXX"></a>
代码而不是<a name="SectionXXX" />
HTML
<div id="content">
<div id="SectionOne">
</div>
<div id="SectionTwo">
<a name="SectionTwo"></a>
</div>
<div id="SectionThree">
<a name="SectionThree"></a>
</div>
<div id="SectionFour">
<a name="SectionFour"></a>
</div>
<div id="SectionFive">
<a name="SectionFive"></a>
</div>
</div>
答案 1 :(得分:0)
我建议你发布的内容是你将Background-image
更改为background-image
......但这是一个很长的镜头。
您的<a>
元素也不完整;并且name
属性现在已过期。请改用ID。也就是说,如果要链接到其中一个div,请使用:
<a href="#SectionFive">Go to Section Five</a>
然后完全摆脱div中的那些a
。