Media queries not working on firefox

问题:

I have been working with this new technology for me (Responsive Design) and I hate the problems which I don't know the answer, I get frustrated :/

Here is my code: http://jsbin.com/ejadej/1

With the latest version of Chrome, I see the site how is supposed to be by my code, whilst Firefox isn't reading this media query

@media screen and(min-width: 960px) {
    #php-info-title {
        background-color: #322E2C;
        position: absolute;
        left:100px;
        bottom: 0px;
        color:white;
        z-index: 0;
        max-width: 300px;
    }
}

It's just ignoring it (if I remove the media query it works well, but i don't want to do that).

The curious thing is that with the other media queries written above that one, Firefox works well.

What's going on with Firefox?

Thanks for your help.

回答1:

Per spec, you need a space between the and and the (. If you don't have it, it's not a valid @media rule.

I filed https://bugs.webkit.org/show_bug.cgi?id=117396 and http://code.google.com/p/chromium/issues/detail?id=248043 for what it's worth.