Buenas, al final mi solución sufría de problemas en Mozilla Firefox 2 por un error en el renderizado de Gecko, ya que recolocaba el contenido del botón fuera del área visible de éste. En IE y Opera funcionaba correctamente.
Por todo ello, y para no tener que parchear el código según navegador, busqué una solución aun más "radical", pero igualmente efectiva (sólo con botones de etiqueta "button", no con "input").
Consiste básicamente en tomar los botones de la página, extraer el contenido de estos respecto del DOM, envolver dicho contenido en elementos DIV posicionados de forma absoluta (tomando como referencia las posición y dimensiones del botón) y reinsertar dichos DIVs en sus respectivos botones.
El hecho de reinsertar los DIVs como nodos hijos de los botones y no de cualquier elemento como puede ser "body" tiene como propósito no romper la herencia CSS existente. De esa manera, si teníamos aplicado un pseudoestilo "hover" que cambiaba el color del texto del botón, éste se seguirá produciendo dentro del DIV.
Este mecanismo puede provocar problemas de solapamiento en el eje Z (por eso antes de tener que recurrir a este método prefería posicionar los DIVs de forma relativa, porque esto no pasaba). Sin embargo, controlando dinámicamente la propiedad "z-index" de los objetos se soluciona. Yo por el momento creo los DIVs de los botones sin indicar eje Z porque no me face falta.
Un código de ejemplo:
Código:
<script type="text/javascript">
var bt = document.getElementById ("my_bt");
var div = document.createElement ("div");
for (var i = 0; i < bt.childNodes.length; i++) {
div.appendChild (bt.removeChild (bt.childNodes [i]));
}
div = bt.appendChild (div);
(Cambios CSS necesarios para posicionar el DIV respecto del botón)
</script>
<button id="my_bt">My button</button>
Dicho código se puede automatizar para que seleccione todos los elementos "button" de la página.
Los cambios para posicionar el CSS no tienen mucho misterio. Usando las propiedades "offsetLeft", "offsetTop", "offsetWidth" y "offsetHeight" del botón uno puede colocar el DIV alieado a la derecha, izquierda, medio, arriba...
Por último, si alguien lee esto y desconoce los atributos y métodos de los diferentes modelos DOM, sonándole eso de "childNodes" y "parentNode" a Chino, es recomendable informarse de todas las maneras que hay de hacer las cosas en JavaScript. Por ejemplo, en
Mozilla Developer Center . Sé que muchos dirán que esta aclaración es una tontería, pero como yo empecé hace años de forma amateur y esto era un "sindiós", por echar una mano a quien retome esto tras años sin tocarlo.