为提升您的使用体验,本站正在维护,部分功能暂时无法使用。如果本站文章无法解决您的问题,您想要向社区提问的话,请到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 提问,我们的支持社区将会很快回复您的疑问。

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

Firefox for Mac won't recognize text drop shadow.

more options

I've not changed the CSS governing text-shadow but recently Firefox doesn't recognize some, not all but some, of the shadowing applied to h1, h2 tags. My guess is it is now not specific enough where one time it was ok. I'm certain this is a CSS problem but it makes me wonder why Firefox once recognized every instance that I applied text-shadow. Opera and Safari recognize all, Firefox doesn't.

The url: http://tampabaysnowskiers.com/index.html

I've not changed the CSS governing text-shadow but recently Firefox doesn't recognize some, not all but some, of the shadowing applied to h1, h2 tags. My guess is it is now not specific enough where one time it was ok. I'm certain this is a CSS problem but it makes me wonder why Firefox once recognized every instance that I applied text-shadow. Opera and Safari recognize all, Firefox doesn't. The url: http://tampabaysnowskiers.com/index.html

所有回复 (5)

more options

Can you check the headings with Firefox's Inspector to see whether text-shadow is being found and applied, or is being overridden?

If you can right-click, choose Inspect Element (Q). The Inspector should open with the DOM tree expanded to that element and the applicable style rules displayed on the right side. (Screenshot attached)

Or use the menu and then "click to select":

  • "3-bar" menu button > Developer > Inspector
  • (menu bar) Tools menu > Web Developer > Inspector

Anything unexpected?

more options

Thank you for the attempt. I've used Firebug as well to see and the code for the text shadow is not crossed through, implying something else is taking over. With the inspector and firebug I do know how to turn things on and off to see what happens as well as changing values.

I do see that I must clarify: the text shadow works, it's the opacity that doesn't. And again, it works perfectly on some h1, h2 and h3 tags, just not all.

more options

I see that the text-shadow color is set to white (#FFF), so is not really noticeable against the background.

h1, h2, h3 {
	text-shadow: 1px 1px 0 #FFFFFF, 3px 3px 0 rgba(0, 0, 0, 0.1);
}
more options

There are two shadows, one is white and one is a 10% opacity of black. The white is 1px wide and is next to the text. A second shadow is offset by 3px and therefore is only 2px wide. That color is handled by the rgba with 0, 0, 0 being the black and the "a" of rgba is the alpha for the opacity level and .1 is 10% of black. This is the part that is ignored on some of those tags and has been ignored since the last Mozilla update of Firefox. It's a technique thing whereby the white acts as a buffer from the real drop shadow and keeps the text from looking fuzzy and still have a subtle shadow.

more options

It's very subtle. When I zoom the page on Windows, I can definitely see it (screen shot attached, with varying opacity), but I don't have the ability to test on Mac.