2011-06-29 17 views
7

Por alguna razón, no puedo hacer que rgba funcione dentro de mi CSS usando IE9. Lo probé usando Chrome, y funciona bien. No estoy seguro de lo que está mal.rgba no funciona en IE9

Mi HTML es:

<!doctype html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 

     <title><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?></title> 

     <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" /> 
     <link href="http://fonts.googleapis.com/css?family=Raleway:100&v1" rel="stylesheet" type="text/css" /> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    </head> 
    <body> 
     <?php wp_nav_menu(); ?> 
    </body> 
</html> 

Mi CSS es:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;} 

body { 
    font-size: 62.5%; 
} 

.menu { 
    font-size: 5em; 
    font-family: 'Raleway', arial, serif; 
} 

.menu ul li a { 
    background: rgba(0,0,0,0.5); 
    text-decoration: none; 
} 
+0

De alguna manera, su sitio no se muestra en el modo de estándares IE9. Publique un enlace en vivo a su sitio y podré encontrar el motivo. – thirtydot

Respuesta

3

Bueno, descubrí por qué. Parece que la "Vista de compatibilidad" estaba habilitada, así que la deshabilité y, voila. Probablemente hice clic accidentalmente cuando quise hacer clic en el botón Actualizar.

13

Los estándares de soporte en Internet Explorer 9 requiere que el navegador para estar en Internet Explorer 9 modo estándar (“Modo IE9”) La mejor forma de hacerlo es utilizar una directiva de estándares DOCTYPE y ninguna metaetiqueta compatible con X-UA o encabezado HTTP. El! DOCTYPE para invocar el modo IE9 es el siguiente:

<!DOCTYPE html> 

background-color: rgba(0,0,0,0.5); 
+0

OK ... pero ¿no debería IE9 soportar 'rgba()' en la propiedad de taquigrafía de todos modos? – BoltClock

+0

técnicamente la abreviatura debería funcionar, pero puede estar exponiendo un error en el analizador de IE CSS. – SpliFF

+0

Lo intenté y todavía no funciona. – cvandal

0

Estaba teniendo problemas con el color de fondo en ie9 también. Después de buscar soluciones con mi google-fu, me di cuenta de que estaba usando este border-radius.htc que estaba rompiendo todo el CSS en ese div en particular. No solo el color de fondo, sino también los bordes y los colores de las fuentes. Se utiliza como esto:

<style> 
     .ie-rounded-corner{behavior: url(../include/stylesheets/border-radius.htc); } 
    </style> 

    <div class="ie-rounded-corner">Hello World</div> 

que estaba usando que corte la frontera de radio para IE6/7/8 para agregar esquinas redondeadas en algunos elementos. Esto rompe la página en IE9. Al eliminar esa clase, todo funcionó como se esperaba en IE9. Mis esquinas redondeadas ya no están en ie6/7/8. Quizás ahora se necesite una solución diferente para navegadores IE heredados.

Cuestiones relacionadas