2011-06-29 29 views
7

Vì một lý do nào đó, tôi không thể lấy rgba làm việc trong CSS của tôi bằng IE9. Tôi đã thử nghiệm nó bằng cách sử dụng Chrome, và nó hoạt động tốt. Không chắc chắn có gì sai.rgba không hoạt động trong IE9

HTML của tôi là:

<!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> 

CSS của tôi là:

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

Bằng cách nào đó, trang web của bạn không hiển thị trong Chế độ tiêu chuẩn của IE9. Đăng liên kết trực tiếp lên trang web của bạn và tôi sẽ có thể tìm ra lý do. – thirtydot

Trả lời

3

Vâng, tôi đã tìm ra lý do. Có vẻ như là "Chế độ xem tương thích" đã được bật nên tôi đã tắt tính năng này và, thì đấy. Tôi có thể nhấp vào nó một cách tình cờ khi tôi muốn nhấp vào nút làm mới.

13

Các tiêu chuẩn mới hỗ trợ trong Internet Explorer 9 đòi hỏi trình duyệt để có trong Internet Explorer 9 Tiêu chuẩn chế độ (chế độ “IE9”). Cách tốt nhất để làm điều này là sử dụng một tiêu chuẩn! Chỉ thị DOCTYPE và không có thẻ meta hoặc tiêu đề HTTP tương thích X-UA. DOCTYPE để gọi chế độ IE9 là như sau:

<!DOCTYPE html> 

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

OK ... nhưng không nên hỗ trợ IE9 'rgba()' trên thuộc tính viết tắt? – BoltClock

+0

về mặt kỹ thuật viết tắt nên hoạt động nhưng nó có thể phơi bày lỗi trong trình phân tích cú pháp CSS của IE. – SpliFF

+0

Tôi đã thử điều đó và nó vẫn không hoạt động. – cvandal

0

Tôi cũng gặp sự cố với màu nền trong ie9. Sau khi cọ rửa thông qua các giải pháp với google-fu của tôi, tôi nhận ra rằng tôi đã sử dụng border-radius.htc này đã phá vỡ tất cả CSS trong div cụ thể đó. Không chỉ màu nền, mà còn cả viền và màu phông chữ nữa. Nó đã được sử dụng như thế này:

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

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

Tôi đã sử dụng tính năng hack bán kính biên giới đó cho ie6/7/8 để thêm các góc tròn trên một số yếu tố. Điều này phá vỡ trang trong IE9. Sau khi loại bỏ lớp đó, mọi thứ hoạt động như mong đợi trong IE9. Góc tròn của tôi bây giờ đã biến mất trong ie6/7/8. Có lẽ một giải pháp khác bây giờ là cần thiết cho các trình duyệt IE cũ.

Các vấn đề liên quan