웹킷의 기발한 비율 해석

Question

반응이 빠른 디자인으로 작업하면서 점차적으로 머리카락을 잃고 수면. 이건 진짜 웹킷 버그 같아요 : http://jsfiddle.net/TAvec/

웹킷은 20 %의 패딩을 부모의 콘텐츠 상자의 20 %로 해석하지만 파이어 폭스와 오페라는 부모의 전체 상자의 20 %로 해석합니다 (부모의 패딩 포함).

절대 포지셔닝을 유지하면서이 문제를 해결하는 방법은 무엇입니까?

Answer 1

<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/