브라우저 해킹 내가 브라우저 해킹에 작은 문제가

Question

유체 디자인에 작동이 중지, 내 작은 이미지 중 하나는 파이어 폭스보다 더 웹킷 브라우저에서 몇 픽셀 낮은 수 있어야하며 다음과 같이 자체적으로 잘 작동 :

#thumbsicon 
{ 
position: absolute; 
margin: 596px 0px 0px 150px; 
opacity:0.6; 
filter:alpha(opacity=60); /* For IE8 and earlier */ 
} 

@media screen and (-webkit-min-device-pixel-ratio:0){ 
#thumbsicon 
{ 
position: absolute; 
margin: 525px 0px 0px 150px; 
opacity:0.6; 
} 
} 

하지만 유체 반응 설계를 위해 @media all 및 (max-height : 640px)로 CSS를 업데이트했을 때 CSS 스타일을 복사/붙여 넣기하고 각각의 새 크기에 대한 여백을 업데이트하면 Webkit 브라우저는 모든 웹킷 CSS 해킹.

(이 트리밍 된 버전) 코드에서

@media all and (max-height: 640px) 
{ 

#thumbsicon 
{ 
position: absolute; 
margin: 596px 0px 0px 150px; 
opacity:0.6; 
filter:alpha(opacity=60); /* For IE8 and earlier */ 
background: yellow; 
} 


@media screen and (-webkit-min-device-pixel-ratio:0){ 
#thumbsicon 
{ 
position: absolute; 
margin: 525px 0px 0px 150px; 
opacity:0.6; 
} 
} 
} 

아니 실수, 모든

을 @media 사용 아니면있을 때 ...보고 인터넷 검색 이일 지출 해킹이 작동하지 않음 의미없는 실수를 나는 맹목적으로 무시하고 있는가?

감사합니다,

Answer 1

제 2 @media는 처음이다.

@media all and (max-height: 640px) { 
    #thumbsicon { 
     position: absolute; 
     margin: 596px 0px 0px 150px; 
     opacity:0.6; 
     filter:alpha(opacity=60); /* For IE8 and earlier */ 
     background: yellow; 
    } 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #thumbsicon { 
     position: absolute; 
     margin: 525px 0px 0px 150px; 
     opacity:0.6; 
    } 
} 

거나 :
변경에

@media all and (max-height: 640px) { 
    #thumbsicon { 
     position: absolute; 
     margin: 596px 0px 0px 150px; 
     opacity:0.6; 
     filter:alpha(opacity=60); /* For IE8 and earlier */ 
     background: yellow; 
    } 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) and (max-height: 640px) { 
    #thumbsicon { 
     position: absolute; 
     margin: 525px 0px 0px 150px; 
     opacity:0.6; 
    } 
} 

는 또한이 example를 참조하십시오.