I tried all the recommended options including Cufon.now() and a visibility CSS trick but neither seemed to work. Eventually I came up with this solution, which only involves removing a class added to Cufón targets. All your offscreen rules happen in a CSS file and not in Javascript.

In your  stylesheet add this class rule (which is applied to every HTML element you wish to have Cufón-ised) e.g <h2 class=”cufonised”>

 .cufonised { text-indent : -9000px; }

After your Cufon.replace javascript (which I place in a document.ready event handler), add this JS:

jQuery('.cufonised').removeClass('cufonised');

…which resets the text-indent style and shows the Cufón-ised text (i.e the “Cufon.replace()” happens off-screen to the left). visibility : hidden/visible doesn’t seem to work in IE here, so we resort to text-indent.

For non JS enabled browsers and devices, use a noscript tag to reset the style and show the un-Cufón-ised text

<noscript><style type="text/css"> .cufonised { text-indent : 0px; } </style></noscript>

After all that you should have a well behaved Cufón replacement happening cross browser.

IE8 though, still tips a hat to its less illustrious predecessors with “compatibility mode” – something sure to confuse the browsing public, especially that broken page icon. To me it just seems to be a half-baked solution that will cause more problems than its worth – I can envisage people clicking away at that button and ending up in page layout hell.

It’s a hole that Microsoft have dug themselves into by not doing incremental updates to their browser rendering engine, so forcing developers to keep in step as new, non backwards-compatible, changes appear.

Rather than delving into it further, I’d like to propose a solution. Instead of dealing with the various idiosyncratic rendering engine(s) in IE, how about letting developers specify, say, WebKit as the rendering engine for their sites? Microsoft engineers have shown that they can switch rendering modes on the fly with their “X-UA-Compatible” HTTP header – would it be too much to ask for support of something like…

header('X-IE-RenderEngine: WebKit');

which could tell IE to pass the incoming document off to WebKit?

Google, Arora and Apple have shown they can get excellent WebKit based browsers running on Windows – why not Microsoft, too?