Webkit spacing behavior - Web Inspector에서 수정했습니다.

Question

Webkit 기반 브라우저에서 임의의 문제가 발생했습니다 (Chrome 및 Safari에서 테스트 됨). 웹 사이트에서 나는 우리가 우리의 에러 메시지에 사용하는 삽화를 업데이트하고 있으며, Webkit 기반 브라우저를 제외한 모든 브라우저에서 멋지게 보인다. 내가 가지고있는 문제는 Web Inspector를 통해 CSS 규칙을 켜고 끌 때 사라지는 것 같습니다. 성가신 일이 있다는 것입니다

:

문제는 : 같은

텍스트 크기를 제어 위의 간격이 안된다, 그것은 보일 것입니다 Web Inspector에서 css 속성을 토글하면 공백이 사라집니다.

팝업에 대한 HTML은 다음과 같습니다

<div class="popup"> 
    <div class="header"> 
    <div class="block"></div> 
    <a class="normalFont" href="javascript:void(0);" title="Normal Font"><span>Normal Font</span></a> 
    <a class="largerFont" href="javascript:void(0);" title="Larger Font"><span>Larger Font</span></a> 
    <a class="largestFont" href="javascript:void(0);" title="Largest Font"><span>Largest Font</span></a> 
    <a class="close" href="javascript:void(0);" title="Close"><span>Close</span></a> 
    </div> 
    <div class="message">...</div> 
    <div class="footer"></div> 
</div> 

그리고 CSS의 주요 부분은 다음과 같습니다

않습니다 .block이 적용되는

.popup 
{ 
    width: 310px; 
} 

.popup .header 
{ 
    height: 40px; 
    margin: 0; 
    padding: 0; 
    background: url(...); 
} 

.popup .header .block 
{ 
    float: left; 
    height: 19px; 
    width: 210px; 
} 

아무도 이것이 왜 발생하는지와 작업장이 있는지를 압니다. 디?

업데이트 : 라이브 예제 (구형 그래픽 사용)는 here입니다. Webkit 브라우저에서 'Medical Expenses'와 같은 항목을 클릭하면 간격 오류와 함께 팝업이 표시됩니다.

Answer 1

이것은 float 요소 위에있는 요소를 절대적으로 배치 할 수있는 것으로 보이는 플로트 문제로 인해 요소가 절대 배치 된 요소 내에서 흐르는 방법에 영향을 주었기 때문입니다.

Answer 2

이것은 완전한 대답은 아니지만 올바른 방향으로 안내하면 충분합니다. Client.Popups.js에서

, 나는이 라인을 주석 처리하면 CreateOverlay 기능 내부 :

이

$("body").append('<div style="position:absolute;top:0;width:' + $(document).width() + 'px;height:' + $(document).height() + 'px;background:red;opacity:0.5"></div>'); 

이상한 차이는 다음과 같습니다

ResizeOverlay(offset.top, offset.left, width, height, target == null ? null : target); 

을하고 몇 가지 빠른 해키 코드로 교체 오버레이를 만들기 위해 지나간.

제 제안은 오버레이 코드를 자세히 살펴보고 재 작성하는 것입니다.