css - Browser Hack 在 Fluid Design 中停止工作

Question

我有一个浏览器 hack 的小问题，我的一个缩略图在 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 hacks。

(这是一个修剪过的版本)

@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 时做 hacks 不起作用

或者可能存在我盲目忽略的语义错误？

谢谢，

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 .