2010-03-17 19 views
11

Me dieron la tarea de hacer un lavado de cara a nuestro sitio actual. Estoy moderadamente versado en CSS, así que estoy convirtiendo las etiquetas bazillion en estilos CSS y eliminando aproximadamente 2 veces ese número que simplemente no era necesario.Cómo sobrescribir HTML <FONT SIZE = "2"> con CSS

Todo va bien hasta que me encuentro con una determinada página de producto que es solo un envoltorio en el que otros comandos HTML son extraídos por un comando server.execute (filename). (estamos usando aspx para la página de envoltura.)

Hay casi 700 de estas páginas y todas están malditas con esto y aquello. Editores anteriores con FrontPage que solo saben cómo arrastrar cosas bonitas en la pantalla.

De todos modos, me pregunto si hay una forma de usar CSS en la página de envoltura para anular el comportamiento de la etiqueta para que pueda hacer algo cuerdo que se adapte al resto de mis páginas. Incluso estaría abierto a algo de JavaScript que eliminaría las etiquetas, pero esa es mi solución menos preferida. ¡Gracias!

+0

¿Es posible que todas las etiquetas de fuente tengan el tamaño de 2? Si la verdadera 'font {font-size: 12px! Important}' tendrá que hacer en IE6 también. Después de todo, IE es el primer navegador que ha implementado los estándares CSS y lo importante. –

Respuesta

14
font[size="2"] { 
    property: value !important; 
    ... 
} 

Los valores de las propiedades !important después es lo que estás buscando.

+1

Muy bien, pero no funcionará con IE6 - todavía (lamentablemente) digno de mención. –

+0

Gracias por la respuesta que estaba buscando. Tendré que lidiar con IE6 rápida y severamente (lo deseo). – Deverill

+0

Esto no funciona para mí en IE7. –

5

Puede utilizar el CSS attribute selector para que coincida con su etiqueta de fuente:

font[size="2"] { 
    font-size: 12px; 
    font-weight: bold; 
} 
+0

Aunque no funcionará con IE6. Si el cliente usa etiquetas 'font' en su sitio, esto puede ser un problema. –

+0

Gracias James. +1 para la respuesta también. – Deverill

0

Si es posible - es decir, si se puede ignorar IE6 - utilizar el método CSS Eli Gray y James Goodwin proponen.

Una manera más limpia, pero más tediosa sería hacer una búsqueda inteligente + reemplazar cambiando todos <font size='2'> a <span class='size_2'> o algo así. Eliminaría el código malicioso y funcionaría en todos los navegadores.

+1

ya que estamos haciendo lo correcto, que 'size_2' sería mejor nombrado como algo semántico. Sin mencionar el cierre/fuente –

+0

@Adriano verdadero es el nombre de la clase. La fuente de cierre es la razón por la que estoy diciendo búsqueda "inteligente" + reemplazar - tendría que ser una herramienta capaz de reconocer y reemplazar etiquetas. Dreamweaver solía tener esa función, también hay otras herramientas disponibles. –

4

Un restablecimiento simple sería suficiente para este caso, p.

font { 
    font-size: 100%; 
} 
+0

+1 solución muy agradable (si el OP no necesita dar el 'size = 2' un otro tamaño específico a cambio.) –

+0

@Pekka pero el atributo de tamaño anulará esto. Él necesita un '! Important'. –

+0

@Eli Gray: Me gustaría diferir - http://www.pauldwaite.co.uk/test-pages/2465665/ –

0

Desde Internet Explorer ignora la regla !important, podría intentar un enfoque Javascript tales como las siguientes (utiliza jQuery) para reemplazar todos los elementos de la fuente con las luces y tener las hojas de estilo adecuados para aplicar el formato.

$('font').each(function(){ 
    var fontFree = $('span'); 
    fontFree.append($(this).contents()); 
    fontFree.addClass('size_'+$(this).attr('size')) 
    $(this).replaceWith(fontFree); 
});