상대 블록에 중첩 된 절대 블록이 나타납니다. IE8에서 더 낮습니다.

어. 난 정말, 크로스 브라우저 호환성을 싫어 ... 나는 (사용자 정의 단축 코드를 사용하여) 이상의 유혹 해요 항목 바로 아래에 나타나는 팝업 상자를 만들려면 클라이언트에 대한 자료 Wordpress 사이트에서 일하고 있어요. 필자는 16px로 설정된 최상위 비트를 가지고 있으며 Firefox에서 정상적으로 작동합니다. 그러나 IE8에서는 훨씬 더 아래쪽에 나타납니다. 상단을 "0"으로 설정하더라도 상단에있는 것이 아니라 블로그를 포함하는 블로그 아래에 여전히 나타납니다.상대 블록에 중첩 된 절대 블록이 나타납니다. IE8에서 더 낮습니다.

또한 IE8의 글꼴 크기가 약 2 픽셀 작기 때문에 관련 문제가 있습니다. 이 전에도 <sup></sup> 태그가 있지만, 제거하더라도 글꼴 크기가 IE8에서는 여전히 작습니다.

http://www.medicalmarcom.com/services/

왼쪽에 모든 물음표 (좀 툴팁처럼) 그 유혹 때 나타나는 팝업이 있습니다 여기에

는 페이지입니다. FF, IE, Safari 및 Chrome에서 작동해야합니다. 유일하게 작동하지 않는 것은 IE입니다. 고맙게도, 그는 IE6에 대해 언급하지 않았으므로, 내가 그것을 골라 내지 않으면 걱정하지 않을 것입니다.

이

<span class="questions"><sup>(
<div class="popup_content"><span class="popup">?</span> 
<div class="popup_inside" style="display: none;">We’ll ask questions to understand your business, objectives, competitive situation, and positioning statement.<br /> 

<a href="http://www.medicalmarcom.com/services/medical-device-marketing-discovery/"><span style="color:#15398c"><em>Read More >>></em></span></a></div> 
</div> 
)</sup></span>

CSS :

.popup_content { 
    display: inline; 
    position: relative; 
} 
.popup_inside { 
    background-color: #FFF; 
    border: 1px solid #000; 
    text-align: left; 
    font-size: 12px; 
    color: #000; 
    width: 300px; 
    padding: 2px; 
    line-height: 1.5; 
    left: 0; 
    top: 16px; 
    z-index: 1001; 
    position: absolute; 
    display: none; 
} 
.popup { 
    position: relative; 
    z-index: 1000; 
}

출처

2011-04-12 JaidynReiman

글꼴 크기와 맨 위 값을 변경하면 FF와 함께 표시되는 것처럼 보입니다. 상위 값을 변경해도 문제가 해결되지 않았습니까? – Sam

여기에 뭔가가있을 것입니다. Top : 0은 부모 컨테이너의 맨 위에 상자의 윗부분을 배치하고 그 바로 아래에 나타나지 않아야합니다. 중요한 것을 사용하려고 생각하지는 않았지만, 그것이 효과가 있는지 알지조차 모릅니다 ... 그리고 나는 그것의 좋은 생각을 생각하지 않습니다. 상단 및 글꼴 크기 값을 변경하면 모든 브라우저에서 변경됩니다. IE에서 더 높게 설정하면 다른 브라우저에서 보이는 방식이 엉망입니다. 내가 사용하고있는 사이트가 reset.css를 사용하지 않는다고 생각합니다. 문제가 해결되었을 수도 있습니다. – JaidynReiman

좋아,이 IE8은 한모금 태그를 렌더링하는 방법 때문입니다, 저는 믿습니다 여기

는 HTML입니다. 그것의베이스 라인은 텍스트의 나머지 부분과 같다고 생각합니다. 만약 당신이 단지 CSS로 이것을하고 싶다면, 나는 당신 자신의 위 첨자 (superscript) 클래스를 사용하는 것을 고려할 것이다.

Here's a fiddle 저에게 효과가있는 것 같습니다.

대체 솔루션으로 IE7에서 올바르게 렌더링되는 것 같습니다. IE8을 IE7 호환 모드로 강제 설정할 수 있습니다. 이 줄을 <head> 상단에 놓습니다. 나는 이것이 IE9에 무엇을 할 지 모르지만, 그럴만 한 가치가있다.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

출처

2011-04-12 13:39:28 Sam

흠 ... 나는 sup 태그를 제거하려고했지만 아무 것도하지 않는 것 같습니다. 아마, 나는 거기에 그걸로 어지러운 다른 것을 가지고있었습니다. .questions에서는 상대 위치가 아니어야합니다. 나는 둘 다 시도 할 것이다. – JaidynReiman

좋아요, 지금은 아주 가깝습니다. IE에서 글꼴 크기가 더 작아지는 문제가 해결되었습니다. 팝업이 조금 더 가깝게 보인다. 그래도 뭔가 다른 것이있을 것입니다. 그래서 조금 더 파헤칩니다. jsFiddle에서 말한 것과 완전히 똑같은 것을 모방 한 것은 아닙니다. 참고로 나는 sup를 제거하고 새로운 값을 .questions에 추가했습니다. 나는 절대적인 것 대신에 상대적으로 설정했다. 왜냐하면 절대적으로 절대가 (?)를 너무 오른쪽으로 밀었 기 때문이다. – JaidynReiman

상대 블록에 중첩 된 절대 블록이 나타납니다. IE8에서 더 낮습니다.

답변

관련 문제