2010-07-28 14 views
9

Encontré algunas publicaciones con problemas similares, pero esto es algo diferente. Actualicé de jQuery 1.4 a 1.4.2 después de leer otra publicación, pero el problema aún se presenta. También intenté ejecutar IE 8 en modo compatibilidad y nada parecía funcionar. Por supuesto, funciona perfectamente bien en Chrome.No se pueden seleccionar los elementos del elemento HTML5 en IE8 con el selector jQuery

Aquí está el marcado:

<section class="pleaseWaitButton"> 
    <p><img src="images/please_wait.png" alt="Please wait" /></p> 
    <p><input type="image" src="images/add_to_cart.png" alt="Add to cart"/></p> 
</section> 

Aquí está el único selector de jQuery que hace trabajo en este escenario ...

$('.pleaseWaitButton').length // 1 

y aquí está la selectores de jQuery que no funcionan!

$('.pleaseWaitButton').find('input').length // 0 
$('.pleaseWaitButton input').length // 0 
$('.pleaseWaitButton > p > input').length // 0 

¿Alguna idea? Nadie...?

Respuesta

10

Internet Explorer 8 tiene un peculiar soporte para HTML 5, IE6 e IE7 simplemente no lo admiten.

Necesitas shiv los elementos HTML 5 con el fin de utilizar adecuadamente estilo y métodos/propiedades como innerHTML, getElementsByTagName en ellos.

Esto funcionará en IE6-IE8:

<!doctype html> 
<html> 
<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<section class="pleaseWaitButton"> 
    <p><img src="images/please_wait.png" alt="Please wait" /></p> 
     <p><input type="image" src="images/add_to_cart.png" alt="Add to cart"/></p> 
</section> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
<script> 
    alert($('.pleaseWaitButton').find('input').length) 
    alert($('.pleaseWaitButton input').length) 
    alert($('.pleaseWaitButton > p > input').length) 
</script> 
</html> 

Demostración en vivo: http://medero.org/html5.html

+1

Tenga en cuenta que el shiv no resuelve todos los problemas con los nuevos elementos; en particular 'innerHTML' necesita cuidados especiales. No usaría los elementos del contenedor semántico HTML5 todavía: solo le darán errores de IE y aún tienen poco beneficio tangible sobre un div. – bobince

+2

Diré que los elementos HTML5 han hecho que mi CSS sea extremadamente limpia en comparación con lo que he escrito antes. Por ejemplo, cada vez que tengo estilos para el elemento principal en una página, siempre es el elemento de mi artículo, por lo que el css es súper limpio porque solo necesito darle un estilo al elemento del artículo. Ese es solo un ejemplo. No hay necesidad de identificadores en la mayoría de los casos. – jedmao

+0

Gracias por la respuesta. Está funcionando bien hasta ahora. Nunca uso InnterHTML nunca así que no va a ser un problema. – jedmao

3

<section> es un elemento HTML5 no es compatible con Internet Explorer 8, tendrá problemas para usar que como un elemento, incluyendo encontrar niños debajo de él. No es un problema de jQuery, que es un problema DOM básico, here's a demonstration:

Todo lo que estoy haciendo está dando el elemento de una identificación para simplificar las cosas:

<section class="pleaseWaitButton" id="btn"> 

A continuación, tratar de conseguir que los niños:

document.getElementById('btn').children.length 

Esto le da un 2 en los navegadores HTML5, un 0 en IE.

+0

Puede crear el elemento manualmente para que IE admita el estilo y la manipulación DOM correctamente. También hay una solución de Jonathan Neal para imprimir elementos de HTML 5, ya que IE no admite eso para los elementos de HTML 5 de forma nativa. –

+0

@meder - Cierto, mi respuesta fue * por qué * no funciona, y el código html5shiv tiene [otros problemas] (http://code.google.com/p/html5shiv/issues/list) por lo que no es un arreglo rapido. Como nota al margen, para su ejemplo, al hacer una página de ejemplo, asegúrese de tener un código HTML válido o no es una prueba válida :) –

+0

¿Qué fue inválido? – jedmao

Cuestiones relacionadas