Browser Hack перестал работать в Fluid Design - PullRequest
Новая
       14

Browser Hack перестал работать в Fluid Design

1 голос
/ 08 января 2012

У меня небольшая проблема с взломом браузера, одна из моих миниатюр должна быть на несколько пикселей ниже в браузерах 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;
}
}

Но когдая обновил CSS с @media all и (max-height: 640px) для плавного дизайна ответа, и я скопировал / вставил CSS и обновил поля для соответствующих новых размеров, браузеры Webkit игнорируют все взломы CSS WebKit.

(это урезанная версия) 

@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;
}
}
}

Нет ошибок в коде, потратить два дня на поиск и поиск в Google ... Не работают ли хаки при использовании @media all

Или, может быть, есть семантическая ошибка, которую я слепо игнорирую?

Спасибо,

1 Ответ

1 голос
/ 08 января 2012

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;
    }
}

Также см. Этот пример .

...