primer hijo y último hijo con IE8

Tengo algunos css para ajustar cosas en mi tabla.

Aquí está: 

.editor td:first-child
{
    width: 150px; 
}

.editor td:last-child input,
.editor td:last-child textarea
{
    width: 500px;
    padding: 3px 5px 5px 5px;
    border: 1px solid #CCC; 
}

Funciona con Firefox, Safari y Chrome pero no (en este momento) con IE8.

Sé que el problema viene del primer hijo y del último hijo, pero no soy un experto.

¿Alguna idea de cómo puedo fijarlo?

PD: Agregué <!doctype html> encima de mi documento html pero nada cambió.

Author: BoltClock, 2012-01-12
Source

3 answers

Si su tabla tiene solo 2 columnas, puede llegar fácilmente a la segunda td con el selector de hermanos adyacente, que IE8 admite junto con :first-child: 

.editor td:first-child
{
    width: 150px; 
}

.editor td:first-child + td input,
.editor td:first-child + td textarea
{
    width: 500px;
    padding: 3px 5px 5px 5px;
    border: 1px solid #CCC; 
}

De lo contrario, tendrá que usar una biblioteca de selectores JS como jQuery, o agregar manualmente una clase a la última td, como sugiere James Allardice.

 68
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:00:14

Dado que :last-child es una pseudo-clase CSS3, no está soportada en IE8. Creo que :first-child es compatible, como se define en la especificación CSS2.1.

Una posible solución es simplemente darle al último hijo un nombre de clase y estilo a esa clase.

Otra sería usar JavaScript. jQuery hace esto particularmente fácil, ya que proporciona una :last-child pseudo-clase que debería funcionar en IE8. Desafortunadamente, eso podría resultar en un destello de contenido sin estilo mientras se carga el DOM.

 34
Author: James Allardice,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-13 08:10:02

Si desea continuar usando selectores CSS3 pero necesita soportar navegadores más antiguos, le sugeriría usar un polyfill como Selectivizr.js

 3
Author: blues_driven,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-02 08:22:26