: IE에서 요소 위치 지정이 잘못됨 : before 요소가 올바름

Question

저는 현지 회사의 웹 사이트에서 작업하고 있습니다. 우리는 귀하의 어떤 페이지에서든 팝업하는 연락처 양식을 가지고 있으며, 정보를 받아들이고 귀하가 현재보고있는 페이지에 머물게 할 수 있습니다. 어느 것이 잘되고 잘 작동합니다.

제가 지금 알 수없는 것은 양식의 스타일링 요소가 인터넷 익스플로러에서만 이상한 행동을하는 이유입니다.

종이 코너는 CSS를 통해 연락처 양식의 요소 위에 렌더링됩니다. 그것은 IE10에서 다음과 같습니다

및 11

#contact-form{ 
font-size: 18px; 
font-family: Arial, Helvetica, sans-serif; 
color: #0E0C1F; 
background: #F0FBFB; 
    } 

    #contact-form:after { 
content: ""; 
display: block; 
position: absolute; 
border: 50px solid transparent; 
border-bottom: 50px solid #fefefe; 
top: -55px; 
right: 666px; 
box-shadow: 0px 7px 6px -9px black; 
transform: rotate(-45deg); 
-webkit-transform: rotate(-45deg); 
-ms-transform:rotate(-45deg); /* IE 9 */ 
    } 

    #contact-form:before { 
content: ""; 
display: block; 
position: absolute; 
border: 50px solid transparent; 
border-top: 50px solid #fefefe; 
top: 547px; 
left: 666px; 
box-shadow: 0px -7px 6px -9px black; 
transform: rotate(-45deg); 
-webkit-transform: rotate(-45deg); 
-ms-transform:rotate(-45deg); /* IE 9 */ 
    } 

으로 내가 초기 팝업을 렌더링하는 Magnific을 사용하고 아래 내 의견 중 하나로 지적 다음과 같이 CSS이며, 그곳에서 스타일을 지정하십시오. 기본적으로 팝업은 position: relative;으로 설정되어 있으므로 컨테이너가 양식 주위를 둘러 쌉니다.

난 그냥 이상한 벤트 뭔가 position: relative !important을 포함 할 #contact-form ID의 내 스타일 수정 된 버전은 아직 양식을 해결하기 위해 아무것도하지 않았다 이렇게 positions: relative;을 설정 overwritting했다.

다음과 같은 형태로 읽기 래핑 클래스 : IE에서 :after 요소와 종이 가장자리 라인업을 만들기에 어떤 영향을 미칠 않는 바닥에 패딩을 변경

.white-popup-block{background:#FFF;padding:20px 30px 20px 30px;text-align:left;max-width:650px;margin:40px auto;position:relative}

하지만 그것은 단지를 오버 플로우 Firefox 및 Chrome에서 용지 모서리 배치.

Answer 1

bottom 속성을 사용하여 :after을 배치하면 IE로 인한 팝업 높이 차이에 관계없이 위치를 제어 할 수 있습니다.