IE3 및 8에서 CSS3PIE 문제가 발생했습니다.

Question

저는 CSS3PIE을 사용하여 Internet Explorer의 요소에 둥근 모서리를 적용하여 다른 브라우저의 스타일 시트로 가져옵니다. 나는 그것으로 약간 문제점으로 달렸다.

IE8에서 PIE 동작을 가진 요소가 이상하게 작동한다는 것을 발견했습니다. 컨테이너는 오른쪽으로 몇 픽셀 이동하지만 내용은 원래 위치에 머물러있어 내용이 컨테이너에 대해 왼쪽으로 이동했음을 나타냅니다. 이것은 패딩이 없거나 적은 요소에서 특히 문제가됩니다.

IE8에서 X-UA 호환을 사용하여 문제를 해결할 수 있었지만 가능하면이 솔루션을 사용하지 마십시오. 필자는 테스트를 위해 IE9에 액세스 할 수 없지만 PIE와 같은 필자의 이해할 수있는 해킹은 필요하지 않으며 필요하지 않은 브라우저에서 호환 모드를 강제하는 것은 낭비입니다.

IE6에서 PIE 레이아웃이 display:inline; zoom:1; 목록 항목 (IE8 및 다른 브라우저에서 작동하는 인라인 블록을 시뮬레이트하도록 시뮬레이트하기 위해)을 사용하도록 설정된 목록에서 완전히 분해되면서 더 심각한 문제가 있습니다. 여기에서는 목록 항목의 테두리가 완전히 잘못된 위치에 렌더링됩니다.

이상적으로, 나는 PI6이 IE6과 IE8에서 호환 모드에 의지하지 않고도 제대로 작동하도록하고 싶습니다. IE6가 실행되는 한, PIE가 적용되지 않는 우아한 대체 수단이 제공됩니다. IE7은 페이지가 의도 한대로 표시되는 유일한 브라우저입니다.

불행히도 예제 페이지를 제공 할 수는 없지만 나중에 추가 할 수 있습니다.

후속 : 여기

는 IE 테스터로 만든 일부 화면 잡고 있습니다. 나는 그들이 모든 것을 조금 더 분명하게 해주기를 바라고 있습니다. 보시다시피, IE7은 좋습니다. 그러나 IE8에서는 컨테이너가 내용에 비해 왼쪽으로 오프셋되고 IE6에서는 목록 요소 (둥근 1 픽셀 테두리가 있음)가 완전히 엉망입니다! IE8, IE7 및 IE6에 대한

전체 크기 버전도 2

후속 조사가 여기에 데모 페이지에 대한 링크입니다 사용할 수 있습니다.

다른 디자이너들이 스타일 시트와 디자인의 다른 부분에서 작업하고 있기 때문에 오랫동안 완전히 반영된 상태로 유지 될 것이라고 약속 할 수는 없지만 오래도록 문제를 해결할 수 있기를 바랍니다. (예, IE6에는 JS 오류가 있다는 것을 알고 있습니다. 문제는 아닙니다.)
Example page

Answer 1

은 내가 사용하는 것을 선호 http://www.curvycorners.net/

Answer 2

보십시오 여기 http://css3pie.com/forum/viewtopic.php?f=3&t=10

이 질문은 여기에 게시 된 것과 유사하다 제안

position:relative; 
z-index: 0; 

를 추가 : CSS3 PIE - Giving IE border-radius support not working?

Answer 3

내가 경험하고 있었다 비슷한 IE8 문제. 요소 PIE를 적용하여 처음에 10-20px 더 낮게 표시 한 다음 적절한 위치로 점프합니다. "display : inline"규칙을 요소에 적용하면 문제가 중지 된 것 같습니다. "위치 : 상대적;" 요소 또는 상위 요소의 "확대/축소 : 1"은 아무 효과가없는 것 같습니다.

좀 이상합니다. '디스플레이 : 인라인'규칙이 적용되면 새로 고침시 문제가 사라집니다. 그러나 규칙을 제거하면 브라우저 창을 닫았다가 다시 열 때까지 새로 고침을해도 괜찮습니다. 그러면 점프가 다시 나타납니다.

누군가를 돕는 희망.