El script es el siguiente:

/*
 * jQuery submitCSS v1.0
 * http://dixso.net/
 *
 * Copyright (c) 2010 Julio De La Calle Palanques
 * Date: 2010-02-04 12:34:00 - (Jueves, 04 Feb 2010)
 *
 */
function submitCSS(){
	$("input[type=submit]").each(function(){
		if($(this).hasClass("submitCSS")){
			var theclass = $(this).parent().parent("div").attr("class");
			if(theclass != "btnSubmitCSS"){
				$(this).wrap("<div class='btnSubmitCSS'><div></div></div>");
			}
		}
	});
	isIE = !$.support.opacity,
	isIE6 = isIE && !window.XMLHttpRequest
	if (isIE6) {
		$(".btnSubmitCSS").mouseover(function() {
			$(this).addClass("btnSubmitCSS-ie6");
		}).mouseout(function() {
			$(this).removeClass("btnSubmitCSS-ie6");
		});
	}
}

El script necesita una hoja de estilos para añadir estilos al input:

/**************************************************************************
submitCSS 20100204@JCP
***************************************************************************/
#btn-1 .btnSubmitCSS					{background:url(../imagenes/btn-left-gris.gif) no-repeat 0 0;}
#btn-1 .btnSubmitCSS div				{background:url(../imagenes/btn-right-gris.gif) no-repeat right top;}
#btn-2 .btnSubmitCSS					{background:url(../imagenes/btn-left-amarillo.gif) no-repeat 0 0;}
#btn-2 .btnSubmitCSS div				{background:url(../imagenes/btn-right-amarillo.gif) no-repeat right top;}
#btn-3 .btnSubmitCSS					{background:url(../imagenes/btn-left-rojo.gif) no-repeat 0 0;}
#btn-3 .btnSubmitCSS div				{background:url(../imagenes/btn-right-rojo.gif) no-repeat right top;}
.btnSubmitCSS							{padding-left:12px;}
.btnSubmitCSS div						{padding-right:18px; padding-left:6px;}
.btnSubmitCSS, .btnSubmitCSS div		{height:32px; float:left; display:block; line-height:28px; text-decoration:none; color:#FFF; cursor:pointer; font-weight:bold;}
.btnSubmitCSS div input 				{background:none; color:#FFF; border:none; width:auto; float:left; height:32px; padding:0; font-family:Verdana, Geneva, sans-serif; display:block; font-size:11px; cursor:pointer; font-weight:bold; margin:-3px 0 0 0;}
#container .btnSubmitCSS-active,
#container .btnSubmitCSS:hover			{background-position:bottom left;}
#container .btnSubmitCSS-active div,
#container .btnSubmitCSS:hover div	 	{background-position:bottom right;}

Para que el script funcione tenéis que añadir la clase ’submitCSS’ al input submit.

<input type="submit" class="submitCSS" value="Esto es un boton submit" />

Para finalizar, tenéis que inicializar el script:

<script language="javascript" type="text/javascript">
	$(document).ready(function(){
		submitCSS();
	});
</script>

Este script funciona para todos los navegadores, lo único a tener en cuenta es que cada navegador interpreta una tipografía diferente al igual que el tamaño, por lo demás todo perfecto.

Ejemplo: aquí.
Descarga: aquí.

function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

Inicializamos el script y le indicamos la clase que tendrán los elementos:

$(document).ready(function(){
	//Igualamos la altura de los elementos
	equalHeight($(".igualarAltura"));
});

Podéis ver un simple ejemplo: aquí.

Antes de nada, se necesita la librería jQuery para hacer funcionar el script.

¿Qué hace el script?
- Comprueba primero si el fichero de las css de cada navegador existe, si no existe, el script no se ejecuta, eto sirve para que el script no compruebe el navegador ni la versión del usuario.

¿Que ganamos con todo esto?
Rapidez en la ejecución del script, es decir, solo añadirá la hoja de estilos que tengamos en el directorio /css/browsers/.

- Detecta el navegador Internet Explorer 8.0

Script para comprobar rutas de ficheros físicos:

function file_exists (url) {
    var req = this.window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
    if (!req) {throw new Error('XMLHttpRequest not supported');}
    req.open('HEAD', url, false);
    req.send(null);
    if (req.status == 200){
        return true;
    }
    return false;
}

Especificamos a jQuery los navegadores (Útil para diferenciar Safari de Chrome).

var userAgent = navigator.userAgent.toLowerCase();
jQuery.browser = {
	version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1],
	chrome: /chrome/.test( userAgent ),
	safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ),
	opera: /opera/.test( userAgent ),
	msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
	mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};

Ejecutamos las condiciones si el fichero existe o no, si existe, comprobamos la versión del navagador del usuario y añadimos la hoja de estilos.

//Ejecutamos las condiciones si el fichero existe o no.
$(document).ready(function(){
	jQuery.each(jQuery.browser, function(i, val) {
		if(file_exists("css/browsers/ie8.css") ){
			if(i=="msie" && jQuery.browser.version.substr(0,3)=="8.0"){
				$('head').append('<link rel="stylesheet" href="css/browsers/ie8.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/ie7.css")){
			if(i=="msie" && jQuery.browser.version.substr(0,3)=="7.0"){
				$('head').append('<link rel="stylesheet" href="css/browsers/ie7.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/ie6.css")){
			if(i=="msie" && jQuery.browser.version.substr(0,3)=="6.0"){
				$('head').append('<link rel="stylesheet" href="css/browsers/ie6.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/mozilla.css")){
			if($.browser.mozilla){
				$('head').append('<link rel="stylesheet" href="css/browsers/mozilla.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/opera.css")){
			if($.browser.opera){
				$('head').append('<link rel="stylesheet" href="css/browsers/opera.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/safari.css")){
			if($.browser.safari){
				$('head').append('<link rel="stylesheet" href="css/browsers/safari.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/chrome.css")){
			if($.browser.chrome){
				$('head').append('<link rel="stylesheet" href="css/browsers/chrome.css" type="text/css" />');
			}
		}
	});
});

Hojas de estilos predefinidas en el script:
Internet Explorer 8.0 – ie8.css
Internet Explorer 7.0 – ie7.css
Internet Explorer 6.0 – ie6.css
Mozilla Firefox – mozilla.css
Chrome – chrome.css
Opera – opera.css
Safari – safari.css

Nota:
- Navegadores que soporta: IE8, IE7, IE6, Mozilla Firefox, Safari, Opera, Google Chrome
- El script comprobará los ficheros en el directorio ‘css/browsers/nombre_del_navegador.css’.

Podéis ver el ejemplo aquí.
Descargar script: aquí.

$(function() {
	$('a.email').each(function(){
		e = this.rel.replace('(arroba)','@'); //Remplaza el texto '(arroba)' por '@'.
		this.href = 'mailto:' + e;
		$(this).text(e);
	});
});

Añadimos la clase al tag href y substituimos el ‘@’ por el que queramos, en este caso ‘(arroba)’.
Ejemplo: aquí.

<style type="text/css">
span.test { direction: rtl; unicode-bidi:bidi-override; }
</style>
<p><span class="test">moc.tset@tset</span></p>

Muy útil e ingenioso pero al no poder poner un “mailto” no sirve de mucho, para estos casos mejor utilizar jQuery para ocultar el código del email.

Modo de empleo:
- Añadimos la librería cufon-yui.js en nuestro head.
- Nos dirigimos al generador de fuentes (Importante: Las fuentes tienen que ser formato True Type).
- Seleccionad vuestra fuente e incluimos los diferentes “glyphs” que necesitéis.
- Envíamos el formulario y automaticamente se generará un script para descargarlo.
- Añadir esa librería en vuestro head (Importante: Añadirlo justo después de la librería cufon-yui.js).

Para reemplazar el texto, añadimos lo siguiente en el head:

<script type="text/javascript">
	Cufon('h1'); //Esto reemplazará el contenido del h1 por la tipo que hayamos añadido.
</script>

Si queremos utilizar más de una tipo en nuestra web tendremos que hacer todos los pasos anteriores, es decir, añadir todos los scripts en el head y seguidamente añadir esto otro:

<script type="text/javascript">
	Cufon.replace('h1', {fontFamily:'Slant'});
	Cufon.replace('h2', {fontFamily:'Starnberg'});
</script>

Nota: Si utilizáis jQuery, podréis seleccionar más de un elemento de este modo:

<script type="text/javascript">
	Cufon.replace('h1, h3, .capaElemento', {fontFamily:'Slant'});
	Cufon.replace('h2, p, #otraCapa', {fontFamily:'Starnberg'});
</script>

Podéis ver un ejemplo: aquí.
Existe una wiki de cufón para los que quieran saber más.

Mejoras implementadas:
- El script añade automáticamente las capas, no hace falta insertar el código en cada página.
- Se carga el contenido por Ajax.
- Podemos pasarle parámetros de anchura de la capa.

//Variable que almacena la posición del scroll, por defecto tiene valor 0.
scrollCachePosition = 0;
function popupCssShow (URL, width, height) { //Parámetros: URL (URL, Anchura de la capa, Altura de la capa)
	if (typeof document.body.style.maxHeight === "undefined") {//Añade la propiedad maxHeight para IE6.
		$("body","html").css({height: "100%", width: "100%"});
	}
	//La capa 'cssBackground' ocupa toda la pantalla para darle una opacidad.
	//La capa 'cssPopupContainer' es la capa madre del PopUp.
	if (!$("#cssBackground").length>0) {
		$("body").append("<div id=\"cssBackground\"></div><div id=\"cssPopupContainer\"><div id=\"cssPopup\"></div></div>"); //Añade las capas en la página.
	}
	if (width!=undefined) {
		$("#cssPopup").css("width",width);
	}
	if (height!=undefined) {
		$("#cssPopup").css("height",height);
		$("#cssPopup").css("overflow","auto");
	}
	$("#cssBackground").slideDown("slow"); //Efecto jQuery
	scrollCachePosition = $(window).scrollTop();
	window.top.scroll(0,0);
	$("#cssPopup").load(URL,function(){
		//$("#cssPopupContainer").center(); //Si activamos esta línea y desactivamos la de abajo nos centrará el PopUp en el medio de la pantalla.
		$("#cssPopupContainer").css("top",50);
		ancho=$(window).width();
		$("#cssPopupContainer").slideDown("fast", function () {
			anchopopup=$("#cssPopup").width();
			$("#cssPopupContainer").css("width",ancho);
		});
	});
}

function popupCssHide () {
	$("#cssPopupContainer").slideUp("fast", function () {
		$("#cssBackground").fadeOut("fast",function () {
			$("#cssBackground").remove(); //Elimina la capa 'cssBackground'.
			$("#cssPopupContainer").remove(); //Elimina la capa 'cssPopupContainer'.
		});
	});
	if (scrollCachePosition > 0) {
		window.top.scroll(0,scrollCachePosition); //Vuelve a la posición donde estaba el scroll.
		//Reseteamos la variable scrollCachePosition a 0 para poder ejecutar el script tantas veces como sea necesario.
		scrollCachePosition = 0;
	}
}

La hoja de estilos quedaría de la siguiente manera:

#cssBackground 		{height:100%; width:100%; background-color:#000; display:none; position:fixed; top:0; left:0; z-index:100; float:left; opacity:0.65;}
#cssPopup 			{margin:0 auto;}
#cssPopupContainer 	{position:absolute; display:none; z-index:101; width:100%;}

Para que IE6 haga la opacidad y la posición fija tendremos que insertar álgún hack en un condicional en el ‘head’:

<!--[if lt IE 7]>
<style type="text/css" media="all">
	#cssBackground {_position:absolute !important; filter:alpha(opacity=65);}
</style>
<![endif]-->

Para que IE7 haga la opacidad insertamos lo siguiente con un condicional en el ‘head’:

<!--[if IE 7]>
<style type="text/css" media="all">
	#cssBackground {filter:alpha(opacity=65);}
</style>
<![endif]-->

Según la URL que venga añadirá un fichero u otro:
Estructura del PopUp:

<?
if ($_GET['page']=="pagina-1") {
	include ("includes/pagina-1.php");
}elseif ($_GET['page']=="pagina-2") {
	include ("includes/pagina-2.php");
	}
?>

Si le pasamos page=pagina-1 incluirá el fichero pagina-1.php tal y como lo pongo en la condición de arriba.

Para llamar al popup sería de la siguiente forma:

<a href="javascript:void(0);" onclick="popupCssShow('popup.php?page=pagina-1', 460);" title="Abrir PopUp">Abrir PopUp</a>

También le pasamos el parámetro ‘460′ para que nos habrá la ventana a ‘460px’.

Podéis ver un ejemplo aquí.
Descarga del ejemplo aquí.

Nota:
Para que os funcione tenéis que alojar el directorio en vuestro servidor o en local, ya que el ejemplo utilizo php para abrir un fichero u otro.

Otro inconveniente es cuando haces la petición del script a Google y en esos momentos Google tiene muchas peticiones a la vez, pues te tendrás que esperar tu turno, por lo tanto más lentitud en carga de tu web.

Por ello he decido publicar una noticia donde explico algunas alternativas bastantes interesantes.
En anieto2k, nos explican una posible solución bastante efectiva.

var sc = document.createElement("script");
sc.type = "text/javascript";
// SRC de Google
sc.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js?rand=' + Math.random();
var timer = setTimeout(function(){
   if (typeof jQuery == 'function') return;
        var sc = document.createElement("script");
        sc.type = "text/javascript";
        // SRC local
        sc.src = 'http://www.anieto2k.com/wp-content/themes/anieto2k08/js/jquery-1.2.6.min.js';
        document.getElementsByTagName("head")[0].appendChild(sc);
   // Tiempo en milisegundos que estimamos pueda tardar.
}, 200);

sc.onload = sc.onreadystatechange =  function(e){
    clearTimeout(timer);
}
document.getElementsByTagName("head")[0].appendChild(sc);

Este pequeño script lo que hace es comprobar si el servicio está disponible, en caso de no estar disponible no lo deja ejecutar.

Sin embargo, en askapache.com he visto como acelerar la velocidad de carga del script. La idea es tener el script ga.js en nuestro propio servidor, hacemos lo siguiente:

Cambiamos esto:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-xxxxx-xx");
pageTracker._initData();
pageTracker._trackPageview();
</script>

Por este otro script:

<script src="http://www.tudominio.com/js/google-analytics.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-xxxxxx-xx");
pageTracker._initData();pageTracker._trackPageview();
</script>

Con que el código ga.js lo pueden modificar para hacer algunas mejoras, tendremos que crear un cron para que cada cierto tiempo compruebe si ha habido cambios en el fichero, si se diera el caso, el cron copiaría el fichero y lo almacenaría en un directorio temporal y lo substituiría en el directorio dónde se encuentre en el servidor.

#!/bin/sh 

# TMP DIRECTORY
MYTMP=/tmp/ 

# SAVE ga.js HERE
INSTALL_IN=/var/www/nombredetudominio.com/httpdocs/js/ 

# RESOURCE URLS
GOOGLE_GA_URL=http://www.google-analytics.com/ga.js 

# USER-AGENT
UA="Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3" 

# CD TO TMP DIRECTORY
cd $MYTMP 

# DOWNLOAD THE FILE
curl --header "Pragma:" -f -s -A "${UA}" -m 1800 --retry 15 --retry-delay 15 --max-redirs 8 -O $GOOGLE_GA_URL 

# GIVE FILE CORRECT PERMISSIONS
chmod 644 $MYTMP/ga.js 

# COPY FILE TO SITE DIRECTORY
cp -r $MYTMP/ga.js $INSTALL_IN 

# RETURN TO OLDPWD
cd $OLDPWD 

exit 0;

¿Qué pensáis de estas dos posibles soluciones, os parecen factibles?
¿Tenéis alguna otra idea mejor o similar a las comentadas?
¡Dime tu opinión!