Question

I want to make a responsive site, but my attempt so far has some problems in chrome. The problem now – insert media queries into the chrome css hack?

@media screen and (-webkit-min-device-pixel-ratio:0) { 

#myid {position: absolute; top: 10px;}


@media only screen and (max-width: 1024px) {

#myid {position: absolute; top: 8px;}

}

}

Need it only in css, so no javascript or php. Anyone an idea how to solve that problem?

Answer 1

The answer you want to hear, and that I hinted at in a comment, is:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #myid {position: absolute; top: 10px;}
}

@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1024px) {
    #myid {position: absolute; top: 8px;}
}​

As much as I’d like to solve your underlying problem…

I´ve added a font via @font-face which is rendered differently in
chrome and ie. All line-heights was “destroyed” so i used the hack.

?!