각 주요 브라우저마다 모양이 다릅니다.

업데이트 나는 CSS 재설정을 구현했으나 아무 소용이 없습니다. Kejko의 대답도 도움이되지 않고 대신 악화되었습니다. (Chrome에서 스타일이 바뀌면서 잘못 표시됨)각 주요 브라우저마다 모양이 다릅니다.

실제 테이블을 상대적으로 배치 할 수 없다는 것을 알고 있기 때문에 문제가 될 수 있습니다.

.chatIcons { 
    display: table; 
}

최종 업데이트 내 사이트의 각 페이지는 주요 브라우저에보고하고 문제에 달렸다 어떻게 테스트 라이브 후 어디로 이동해야하고 있었다

. 문제는 아이콘의 호버 효과와 관련이있는 것 같습니다.

크롬에서 아이콘 섹션이 원하는대로 정확하게 나타납니다.

파이어 폭스에서 동일한 것처럼 보이지만 한 후에는 대신 주 부모의 100 %의 폭과 높이를하고, 단지 상위에 대하여 머물고 세 번째 아이콘과 .iconInfo의 오버레이에 영향을 미친다 가리킬 컨테이너.

IE 10-11에서는 모든 것이 올바르게 유지되지만 "오버레이"가 더 이상 100 % 높이가 아니며 높이가 실제로 달라집니다. 여기

는 CSS는 호버에 관한됩니다 :

.iconInfo { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.2); 
    text-align: center; 
    opacity: 0; 
    transition: opacity 0.6s ease; 
    -webkit-transition: opacity 0.6s ease; 
    -moz-transition: opacity 0.6s ease; 
} 

.icon:hover .iconInfo { 
    opacity: 1; 
}

내가 도울 수있는 바이올린 포함 한 Demo

출처

2014-02-19 Josh Powell

그냥 레코드 용으로 css reset oder normalize.css와 같은 것을 사용합니까? – Johnny000

@ Johnny000 나는 이것을하지 못하게하는 기본 스타일이라고 생각합니까? –

IE 버그는 저에게 기본 스타일과 관련 될 수있는 무언가를 좋아합니다. – Johnny000

-2

을이 시도 :

.icon {
국경 반경 : 5px를 ;
디스플레이 : 인라인 블록;
패딩 : 15px 0;
위치 : 상대적;
세로 정렬 : 중간;
폭 : 32.99 %;
}

이렇게하면 문제가 해결됩니다.

출처

2014-02-19 15:21:10 Kejko

테스트 해 보셨습니까? 작동하지 않아서 크롬이 잘못 표시되기도합니다. –

각 주요 브라우저마다 모양이 다릅니다.

답변

관련 문제