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 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时黑客不行

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

谢谢，

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。

Browser Hack停止在Fluid Design工作

1 个答案: