причудливая процентная интерпретация в webkit - PullRequest
Новая
       26

причудливая процентная интерпретация в webkit

2 голосов
/ 17 февраля 2012

Работает над адаптивным дизайном и постепенно теряет волосы и сон.Это похоже на настоящую ошибку webkit: http://jsfiddle.net/TAvec/

Проблема здесь совершенно ясна - webkit интерпретирует 20% заполнения как 20% поля содержимого родителя, в то время как Firefox и Opera интерпретируют его как 20%общий ящик родителя (включая отступы родителя).

Есть идеи, как обойти эту проблему, сохранив при этом абсолютное позиционирование?

1 Ответ

0 голосов
/ 26 ноября 2012

Вы можете обернуть содержимое вашего <aside> в div и назначить заполнение этому, а не <aside>.Таким образом, вы можете убедиться, что отступы в FF и Chrome (не проверяли O или IE) визуализируются относительно контейнера, т. Е. <aside>. 

<!--  HTML  -->
    <article>
    <h1>Parent</h1>
    <p>Content...</p>

    <aside>
      <div class="content">
        <h1>Aside child</h1>
        <p>The prime minister also suggested the move would have implications for the UK's EU and Nato membership.</p>
      </div>
    </aside>
</article>


//CSS
article{  
    background:chocolate;
    padding-left:40%;
    position:relative;    
}
aside{
    background:chartreuse;
    position:absolute;
    left:0;top:0;bottom:0;
    width:20%;
}

article div.content {  //'%' declarations relative to parent
    width: 100%;
    height: 100%;
    padding: 20%;
    border:20px solid black;
    background-color: #fff;
}

Вот оно в действии: http://jsfiddle.net/KYyR7/3/

...