css3 in facebook app

this do开发者_StackOverflow中文版esn't work in a facebook application?

q:before { content: '\00AB';   color: #FF0000; }
q:after { content: '\00BB';  color: #FF0000; } 

If you are building an FBML application, then yes, your CSS will be filtered through Facebook's content rendering servers. They do this with all FBML pages and referenced resources in order to prefix all your HTML/CSS/JS elements with a "namespace" created using your application id. This ensures that your CSS can't mess with the primary Facebook layouts.

Unfortunately, their CSS filters seem to disallow some CSS. For example, I have found that all the Firefox specific CSS rules such as -moz-border-radius: 3px work fine, but the corresponding -webkit-border-radius: 3px does not work. Very annoying.

My suggestion is to find the rewritten CSS file and see what they've done with it. You'll have to view source on your FBML page and look for the CSS files, they generally come from http://external.ak.fbcdn.net/fbml_static_get.php, with a query string that will look like the actual source. Check out your CSS file and you'll see how it's been re-written... I believe I've used the content: rule before, so perhaps it's being sanitized in some way.

If it's showing question marks instead of the quotes then that usually means you have an encoding issue. The hex-content I mentioned is the '\00AB' part. That's the hex equivalent of an angled quotation mark, otherwise known as « or « ...it shows a «

Try this:

q:before { content: 'test';   color: #FF0000; }

To verify that normal text content is working ok - it should insert the word "test".

I played with this a little and I seemed to have trouble with the font I was using, when I switched to arial it suddenly started working, so you could try that. If it works you don't need to change the font for everything, just q:before and q:after