Browser Hack 停止在 Fluid Design 中工作

Question

我有一个浏览器黑客的小问题，我的一个缩略图在 webkit 浏览器中需要比 Firefox 低几个像素，并且它本身就可以正常工作，如下所示：

#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 浏览器忽略所有 webkit css hack。

（这是精简版）

@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 时，hack 不起作用

或者我盲目地忽略了一个语义错误？

谢谢，

Answer 1

第二个@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。