IE7 / IE8 в режиме совместимости DIV с проблемой переполнения - PullRequest
Новая
       0

IE7 / IE8 в режиме совместимости DIV с проблемой переполнения

0 голосов
/ 31 января 2011

У меня есть прокручиваемый div на странице, который заканчивается рендерингом за нижнюю часть div и иногда оставляет за собой символы палки, которые не прокручиваются. Это происходит в IE7 и IE8 в режиме совместимости.

Вот HTML-код из DOM: 

<DIV id=ctl00_MainContent_ViewPort class=AgreementViewPort><IMG class=PortSeal src="/images/Seal.png">
<DIV class=DocumentTitle>Document Title</DIV>
<OL>
<LI>Condition #1</LI>
<LI>Condition #2<SUP>1</SUP></LI>
<LI>Condition #3</LI>
<DL>
<DT><SUP>1</SUP> some foot-noted definition.</DT></DL></DIV>

Вот применяемый стиль CSS: 

color: #000;
font-family: arial, tahoma, sans-serif
font-size: 12pt;
height: 300px;
margin: 5px;
overflow: scroll;
padding : 5px;
width: 600px;

Это хорошо отображается в IE8, Firefox и Chrome.

Есть предложения?

Ответы [ 2 ]

0 голосов
/ 31 января 2011

Мы раскрыли тайну.

Если вы хотите прямо заняться проблемой, вот где ее можно увидеть live . Примечание: после того, как мы нажмем исправление, эта ссылка не будет воспроизводиться.

В элементе LI на уровне страницы CSS я удалил следующие атрибуты стиля 

li
{
        margin-bottom: 10px;
        position: relative;
        left: 10px;
        width: 500px;
}

И заменил их на: 

li
{
    margin: 0px 0px 10px 25px;
}

В элементе OL в CSS уровня страницы был перемещен атрибут ширины. 

ol 
    {
        padding-left: 10px;
        width: 500px;
    }

И я чувствую себя чем-то вроде идиота. Мораль этой истории, которая обсуждалась в другом месте, заключается в том, что прокручиваемые div-ы IE7 и атрибут позиции CSS не очень хорошо сочетаются друг с другом.

0 голосов
/ 31 января 2011

Просто посмотрев, я бы предложил поместить изображение в свой собственный DIV Таким образом, вы можете контролировать любые переполнения.

Также добавьте в свой CSS следующее: 


clip:rect(0px,600px,300px,0px);
...