duplicating div background

Я пытаюсь создать небольшой веб-сайт, который представляет собой одну страницу с 5 сложными div в теле. Первый и второй div хороши, но все divs после этого (3, 4 и 5) все повторяют уникальное фоновое изображение, когда сайт просматривается в IE9. Сайт отлично работает в совместимости с FF 20.0.1, IE10, IE 10 и совместимость с IE9, поэтому эти проблемы появляются только в IE9. Я взял все из CSS и html за исключением только этих 5 контейнеров и обнаружил, что не могу точно определить проблему, вызывающую дублирование фоновых изображений в 3-м, 4-м и 5-м div. Я также повторил второй div, и он также дублирует фон во втором экземпляре. Если у кого-то есть представление о том, чего я не хватает, я бы очень признателен. Кроме того, я играл без повторных и других идей, которые я нашел при поиске решения, но на данный момент ничего не сработало.duplicating div background

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>

источник

2013-05-31 Matt H

Вот [Fiddle] (http://jsfiddle.net/mv6hY/) – Bigood

Закрой 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>

источник

2013-05-31 06:53:36 3dgoo

Все, что я могу посоветовать с тем, что вы опубликовали, это то, что вы меняете Background-image на background-image ... но это длинный снимок.

Также ваши элементы <a> являются неполными; и атрибут name устарел. Вместо этого используйте идентификаторы. То есть, если вы хотите связаться с одним из этих дивы, используйте:

<a href="#SectionFive">Go to Section Five</a>

Тогда просто избавиться от этих a с в дивы в целом.

источник

2013-05-31 06:54:17

Это сделало трюк! Спасибо Ральфу и всем остальным, кто рассмотрел мой вопрос. –

duplicating div background

ответ

Смежные вопросы