Text wrapping inconsistent in Firefox 3 on PC only

问题

This is a recurring problem I have in Firefox 3.0. It seems when I keep refreshing sometimes it wraps, sometimes it doesn't. When it doesn't wrap, I can adjust the window size and the sIFR'd element will snap to its correct size. I need my elements to wrap on load, based on the width of it's container.

I have the most current 'nightly build' of sIFR 3.0.

I want to sIFR a h2 tag. The h2 tag is enclosed in a div, and both have set widths.

<div class="recipe-title">
   <h2>This is a recipe title</h2>
</div>

In my sifr.js file, I have the following parameters set:

forceWidth = true; 
fitExactly = true; 
preventWrap = false;

My .sifr.CSS file looks like this:

@media screen {
  .sIFR-active .recipe-title h2 { width:455px; font-size:16px; text-transform:uppercase; }
}

And my normal CSS file looks like this:

.recipe-title, .recipe-title h2 { width:400px; }

Everything else seems to work in all other browsers except for FF3 on PC only. Is this a known bug?

回答1:

sIFR may be initializing too early. Easiest fix is to set sIFR.useDomLoaded = false; before sIFR.activate(), which will wait until page load before replacing the elements.

You can also look into using sIFR.useStyleCheck = true; which needs a bit more CSS but will wait until the CSS has loaded.

回答2:

I'm pretty sure it's text-transform:uppercase enlarging the word width after the flash width has been set

I've been trying to figure a solution to this for some time

回答3:

For the common user... make sure that you set your width and height of the div container for your object or image. Firefox will wrap any text following if these values are not set.