나는 div 두 개를 HTML로 팝업 할 수있는 몇 가지 코드가 있습니다.CSS 절대 위치 지정 악몽 - 브라우저 차이점
나는 Firefox에서 완벽한 픽셀을 얻었고 다른 모든 브라우저 (IE에서는 테스트되지 않음)가 꺼져 있음을 알게되었습니다.
다른 브라우저에서 절대 위치 요소를 처리하는 방법과 내 딜레마를 해결하는 방법에 대한 기사를 나에게 보여줄 수 있습니까?
여기에 my original code이고, 여기에 my new code입니다.
이 내가보고있는 무슨이다 :
내가 잘못하고있는 것을 해결했습니다. 나는 p 태그 주위에 div을 만들고 난 다음에주위에 패딩을 사용하여 공간을 계산하기 전에 원하는대로 너비를 설정했습니다. 여기에 완벽하게 작동하는 업데이트 된 코드가 있습니다!
업데이트 코드를 (I 희망) : DEMO
편집 : 나는 (당신은 숨겨진 열을 표시합니다) 눈에 보이는 상자의 각 외부 그래서를 숨겨진 상자를했다 그것들을 배치하려고 할 때 DOM에서 어디에 위치 할 것인지 결정하는 것이 쉽지 않았지만 을 숨기려면 상자를 각각 상자에 표시하고 position: relative; CSS를 사용할 수 있습니다. 재산 어린이 상자를 배치하는 정확히 그들이 원하는!
CSS
.visibleBox{
position: relative;
}
.hiddenBox{
position: absolute;
bottom: 0;
right:0;
}
HTML
<div class="visibleBox">
<p class="hiddenBox">I am hidden sometimes<p>
</div>
그래서 내가 말하려고하는 것은 나는 DIV의 P 외부가이 위치에 그것을 완전히 어색하게 된 것입니다 모든 브라우저에서 올바르게 사용하지만 상대방과 절대 위치를 가진 부모와 자식을 사용하여 문제가 해결되었습니다.
나는 당신과 같은 문제가 있습니다.그것은 악몽입니다 ... 나는 당신의 최종 해결책을 이해하지 못합니다. 나는 아직도 위치가 픽셀에 의해 약간 다른 이유를 이해하지 못한다 .. –
@ DanielRamirez-Escudero 위에 더 자세한 내용이 추가 되었기를 바랍니다. – jamcoupe
모든 브라우저에서 절대 위치 같은 방식으로 정의된다.
요소는 상대/절대 위치의 부모 또는 해당 요소가 아닌 경우 body 요소에 절대적으로 배치됩니다.
저는 이것이 CSS 위치 지정 문제라고 생각하지 않습니다. none 표시를 차단하도록 변경하면 div가 IE에 있음을 알 수 있습니다. – kidwon