Sử dụng IE bình luận có điều kiện bên trong một stylesheet

Tôi biết rằng bạn có thể sử dụng một trình duyệt IE có điều kiện bình luận bên trong HTML:Sử dụng IE bình luận có điều kiện bên trong một stylesheet

<!--[if IE]> 
    <link href="ieOnlyStylesheet.css" /> 
<![endif]-->

Nhưng nếu tôi muốn nhắm mục tiêu chỉ IE trong một stylesheet , việc thiết lập một quy tắc css cho một phần tử cụ thể bên trong html. Ví dụ, bạn có thể sử dụng Chrome/Safari này hack bên trong file css như mã css ...

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .myClass{ 
     background: #fff; 
     background:rgba(255,0,255,0.7); 
    } 
}

Nhưng bằng cách sử dụng IE Hack bên trong stylesheet CSS như thế này:

<!--[if IE]> 
     .myClass{ 
     background: #fff; 
     background:rgba(255,0,255,0.7); 
    } 
<![endif]-->

làm không làm việc. Tôi phải làm gì khi sử dụng bên trong biểu định kiểu để chỉ nhắm mục tiêu đến IE?

Nguồn

2012-07-28 Dexter Schneider

bình luận có điều kiện là 1) không một hack 2) không áp dụng đối với CSS, chỉ sang HTML. – BoltClock

cảm ơn BoltClock, vì vậy tôi thấy –

Nhận xét có điều kiện không hoạt động trong biểu định kiểu. Thay vào đó, bạn có thể sử dụng các nhận xét có điều kiện trong HTML của mình để áp dụng các lớp CSS hoặc ID khác nhau cho các phần tử mà bạn có thể nhắm mục tiêu bằng CSS.

Ví dụ:

<!--[if IE]> 
    <div id="wrapper" class="ie"> 
<![endif]--> 
<!--[if !IE]> 
    <div id="wrapper"> 
<![endif]-->

Ngoài ra, có các công cụ như Modernizr rằng làm phát hiện tính năng trong một cách rất giống nhau (bằng cách thêm các lớp học để các yếu tố <html>). Bạn có thể sử dụng nó để dần dần nâng cao thiết kế/tập lệnh của bạn cho các trình duyệt mới hơn trong khi vẫn hỗ trợ các trình duyệt cũ hơn.

Nguồn

2012-07-28 18:56:35

Cảm ơn bạn, mã của bạn có ý nghĩa và nó có thể được sử dụng để làm những gì tôi muốn đạt được ... –

Modernizr tự động hóa nó như thế nào? Xin giải thích vì tôi chỉ biết rằng Modernizr "phát hiện". –

@YannisDran, bạn nói đúng, nó sẽ không tự động thêm lớp IE, tuy nhiên, nó sẽ phát hiện tính năng mà bạn có thể nhắm mục tiêu thông qua CSS là một cách tương tự. Tôi đã cập nhật câu trả lời để rõ ràng hơn về điều đó. –

Bạn không thể sử dụng các nhận xét có điều kiện của IE nhưng bạn có thể sử dụng hack. This page of CSS hacks giải thích IE hack bạn có thể sử dụng (và nhiều hơn nữa).

Nguồn

2012-07-28 18:43:24

Cảm ơn bạn, loại này trả lời câu hỏi của tôi (btw, tôi thấy bài viết này trước đây, tôi thường làm một số nghiên cứu trước khi đăng trên Stack), nhưng nó chỉ có một giải pháp trong CSS cho IE 7 và dưới đây cụ thể là: IE 6 và dưới * html {} IE 7 và dưới *: first-child + html {} * html {} IE 7 chỉ *: first-child + html {} tôi muốn một cách để nhắm mục tiêu tất cả các trình duyệt IE với một hack trong CSS, nhưng có vẻ như điều đó là không thể. –

Bạn không, chỉ cần sử dụng trình duyệt IE bình luận có điều kiện để tải một stylesheet IE cụ thể:

<!--[if IE]> 
    <link rel="stylesheet" type="text/css" href="path/to/stylesheet.css"></link> 
<![endif]-->

Có hacks CSS, nhưng lưu ý rằng một Hack đòi hỏi sử dụng một lỗi phân tích cú pháp (của một số loại) để nhắm mục tiêu quy tắc CSS cụ thể cho trình duyệt. Chúng không được sửa chữa trong các bản vá tiếp theo cho một hóa thân cụ thể của trình duyệt, nhưng chúng sẽ được sửa chữa trong các phiên bản sau (vì vậy IE 9 và 10 không bị ảnh hưởng bởi các hacks CSS nhắm vào IE 6 hoặc IE 5 cho Mac. ..).

Nguồn

2012-07-28 18:44:20

Những gì bạn muốn làm là tạo kiểu cho mọi thứ trong biểu định kiểu như bình thường đối với bất kỳ trình duyệt nào khác. SAU KHI bạn nhập biểu định kiểu thông thường vào trang của mình, sau đó bạn sẽ nhập biểu định kiểu IE cụ thể với câu lệnh điều kiện thường lệ <!--[if IE]>.

Sau khi phương pháp này nhập kiểu cho tất cả các trình duyệt và sau đó sử dụng các kiểu cụ thể của IE để ghi đè các kiểu không tương thích, không hiển thị chính xác hoặc cần được điều chỉnh để sử dụng trong IE.

Nguồn

2012-07-28 19:10:01

Nó có thể được dễ dàng hơn so với những gì Derek Hunziker nói:

Chỉ cần đính kèm mã này vì nó là:

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
    <head>

Sau đó, bạn có thể nhắm mục tiêu một cách dễ dàng, ví dụ nếu bạn muốn nhắm mục tiêu IE 8 và thấp hơn bạn viết:

.lt-ie9 body{css rule here;}

và bạn đã hoàn tất!

Cheers

Nguồn

2013-10-20 22:54:58

IE stylesheet hacks

.Class { 
    color: green;  /* standard */ 
    color: green\9; /* IE 8 and below */ 
    *color: green;  /* IE 7 and below */ 
    color: green !ie; /* IE 7 and below */ 
    _color: green;  /* IE 6 */ 
}

Nguồn

2013-12-20 01:58:23 pcunite

+13

Vui lòng không sử dụng các hacks trên. Thông tin này gây hiểu lầm và có thể khiến bạn gặp nhiều vấn đề hơn là giải quyết. Ví dụ, '\ 9' hack * không * nhắm mục tiêu IE 8 trở xuống. Nó ảnh hưởng đến IE 7, 8, 9 và 10. Xin vui lòng, ** không sử dụng các ** này. – Sampson

Sử dụng IE bình luận có điều kiện bên trong một stylesheet

Trả lời

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