поля и отступы вызывают проблемы при расчете макета - PullRequest
Новая
       16

поля и отступы вызывают проблемы при расчете макета

1 голос
/ 05 марта 2009

У меня проблема, из-за которой я не получаю истинное смещение в IE6. Я использую смещение для размещения всплывающего окна.

CSS выглядит примерно так: 

.container50-50-right-border              { }
.container50-50-right-border .title       {padding: 0px; margin: 0px;
                                           clear: both;}
.container50-50-right-border .leftcolumn  {width: 47%; float: left;
                                           display:inline;}
.container50-50-right-border .rightcolumn {width: 48%; float: left;
                                           display:inline;
                                           border-left: 1px solid #D6D7DE;
                                           padding: 0px 0px 0px 10px;
                                           margin: 0px 0px 0px 10px;}
.container50-50-right-border .description {clear: both;}

когда я удаляю отступы и поля из 

.container50-50-right-border .rightcolumn

ведет себя немного лучше, но не идеально. Код позиционирования хорошо протестирован, поэтому я не думаю, что это так.

Извините за скудное количество кода. Любая помощь будет оценена.

Ответы [ 2 ]

1 голос
/ 18 марта 2009

Имейте в виду, IE будет переключать блочные модели в зависимости от режима рендеринга (режим Quirks vs Standards). Убедитесь, что используемый вами Doctype переводит IE в строгий режим, иначе блочная модель, используемая для позиционирования, не будет стандартной моделью W3C.

http://www.quirksmode.org/css/quirksmode.html

0 голосов
/ 06 марта 2009

Я провел простой тест с вашим CSS, javascript из вашего комментария, а некоторые составили HTML, чтобы проверить это. Я добавил функцию showDiv для проверки 

<script type='text/javascript'>
function getPositionLeft(This){
    var el = This;
    var pL = 0; 
    while(el){pL+=el.offsetLeft;el=el.offsetParent;} 
    return pL;
}

function getPositionTop(This){ 
    var el = This;
    var pT = 0; 
    while(el){pT+=el.offsetTop;el=el.offsetParent;} 
    return pT;
}

function showDiv(c){
    var d3 = document.getElementById('3');
    d3.style.position = 'absolute';
    d3.style.left = (getPositionLeft(document.getElementById('test')) + 10) + 'px';
    d3.style.top = (getPositionTop(document.getElementById('test')) + 20) + 'px';
}
</script>

<style>
.container50-50-right-border {width: 600px;}
.container50-50-right-border .title {padding: 0px; margin: 0px; clear: both;}
.container50-50-right-border .leftcolumn {width: 47%; float: left; display:inline; border: 1px solid blue;}
.container50-50-right-border .rightcolumn {width: 48%; float: left; display:inline; border-left: 1px solid #D6D7DE; padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px;}
.container50-50-right-border .description {clear: both;}
</style>

<div class="container50-50-right-border">
    <div class="leftcolumn" id="1">1</div>
    <div class="rightcolumn" id="2"><a href="test" id="test" onclick="showDiv(); return false;">test</a></div>
</div>
<span id="3" style="background: black; color: white;">move me</span>

Я тестировал в IE6, он отлично позиционировался. Можете ли вы дать еще немного кода, возможно, HTML и JavaScript?

...