10

Tôi có một tập lệnh kiểu CSS/jQuery Checkbox: http://jsfiddle.net/BwaCD/Làm cách nào tôi có thể đặt CSS chỉ cho các trình duyệt IE cụ thể?

Vấn đề là, trong các trình duyệt hiện tại để nhịp trôi nổi trên đầu vào, vị trí của đầu vào phải tuyệt đối. Nhưng trong IE8 & bên dưới, tập lệnh sẽ không hoạt động và do đó tôi bị bỏ lại và nhập vào vị trí tuyệt đối chỉ trôi nổi trên các phần tử khác. Tôi không yêu cầu kịch bản làm việc trong IE8 & bên dưới.

Tôi muốn biết cách tôi có thể sử dụng CSS để đặt kiểu cụ thể nếu đó là IE8 trở xuống. Tôi đoán jQuery sẽ được chấp nhận nếu cần thiết, nhưng tôi không nghĩ là vậy. Tôi biết điều này có thể được thực hiện chỉ với CSS & HTML Tôi chỉ không biết làm thế nào.

Trả lời

10
+0

Thứ hai không hoạt động ... trước tiên đã làm. – henryaaron

+0

Ồ. Cảm ơn. Tôi chỉ muốn hỏi mặc dù, là những hacks an toàn ở tất cả? –

+0

Hack là xấu, luôn luôn! Tôi đề nghị sử dụng giải pháp từ liên kết đầu tiên của tôi nhưng nếu bạn thực sự phải sử dụng hack, tôi tìm thấy trang web này: http://browserhacks.com/ - tốt để biết rằng những điều này tồn tại và họ làm việc như mong muốn nhưng bạn thực sự không nên sử dụng nó. – Adaz

15

bình luận có điều kiện sẽ làm việc (<!--[if lte IE 8]><stylesheet><![endif]-->), nhưng nếu bạn muốn làm điều đó tất cả trong stylesheet, có is a way :

body { 
    color: red; /* all browsers, of course */ 
    color: green\9; /* IE only */ 
} 

Điều quan trọng ở đây là "\ 9", trong đó phải chính xác là "\ 9". Tôi không rõ ràng về lý do tại sao điều này xảy ra.

CHỈNH SỬA: Bản hack \ 9 không đủ. Để loại trừ IE9, bạn cũng cần :root hack:

:root body { 
    color: red\9; /* IE9 only */ 
} 

Các trình duyệt khác ngoài IE có thể hỗ trợ :root, vì vậy kết hợp nó với các \ 9 Hack nếu bạn đang sử dụng nó để nhắm mục tiêu IE9.

+0

Điều này '\ 9' vì một số lý do không hoạt động ... – henryaaron

+0

Dường như \ 9 thực sự nhắm mục tiêu tất cả các phiên bản của IE, không chỉ 8 và dưới đây. http://mathiasbynens.be/notes/safe-css-hacks#css-hacks – Brilliand

+0

\ 9 hoạt động tuyệt vời và kể từ khi MS bỏ các nhận xét có điều kiện bắt đầu từ IE10, điều này dường như chỉ là giải pháp miễn phí chỉ dành cho IE mục tiêu. Cảm ơn! – f055

3

Bạn có thể sử dụng ý kiến ​​có điều kiện trình duyệt Internet Explorer để thêm một tên lớp cho thẻ gốc HTML cho các trình duyệt IE cũ:

<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> 
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> 
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 

Sau đó, bạn có thể định nghĩa CSS IE-cụ thể bằng cách tham khảo các tên lớp thích hợp, như này:

.ie8 body { 
    /* Will apply only to IE8 */ 
} 

Nguồn: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

2

Target mọi phiên bản IE:

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

Target mọi thứ TRỪ IE

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

Target IE 7 CHỈ

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

Target IE 6 CHỈ

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

Target IE 5 CHỈ

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

Target IE 5,5 CHỈ

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

Target IE 6 và LOWER

<!--[if lt IE 7]> 
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" /> 
<![endif]--> 

<!--[if lte IE 6]> 
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" /> 
<![endif]--> 

Target IE 7 và LOWER

<!--[if lt IE 8]> 
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> 
<![endif]--> 

<!--[if lte IE 7]> 
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> 
<![endif]--> 

Target IE 8 và LOWER

<!--[if lt IE 9]> 
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> 
<![endif]--> 
<!--[if lte IE 8]> 
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> 
<![endif]--> 

Target IE 6 và cao hơn

<!--[if gt IE 5.5]> 
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" /> 
<![endif]--> 
<!--[if gte IE 6]> 
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" /> 
<![endif]--> 

Target IE 7 trở lên

<!--[if gt IE 6]> 
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> 
<![endif]--> 
<!--[if gte IE 7]> 
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> 
<![endif]--> 

Target IE 8 và CAO HƠN

<!--[if gt IE 7]> 
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> 
<![endif]--> 
<!--[if gte IE 8]> 
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> 
<![endif]--> 
1

tôi có một giải pháp hữu ích cho trình duyệt IE 10 và 11. Các kiểm tra kịch bản cho IE và phiên bản và sau đó nối thêm lớp .ie10 hoặc .ie11 vào thẻ.

Bằng cách đó bạn có thể viết các quy tắc cụ thể như .ie10 .something {} và họ nhận được chỉ áp dụng khi trình duyệt là IE 10 hoặc 11.

Kiểm tra nó ra, nó rất hữu ích để suy thoái duyên dáng, được thử nghiệm trên một vài trang web thương mại và không thực sự hacky: http://marxo.me/target-ie-in-css

0

tôi giải quyết theo cách này cho con trỏ lấy trong Internet Explorer:

.grab_cursor { 
    cursor: grab; 
    cursor: -moz-grab; 
    cursor: -webkit-grab; 
    cursor: url('../img/cursors/openhand.cur'), url('img/cursors/openhand.cur'), n-resize; /* standard: note the different path for the .cur file */ 
    cursor: url('img/cursors/openhand.cur'), n-resize\9; /* IE 8 and below */ 
    *cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 7 and below */ 
    _cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 6 */ 
} 

Trong Internet Explorer cho Windows lên đến và bao gồm cả phiên bản 8, nếu một giá trị URI tương đối được quy định trong một phong cách bên ngoài tập tin trang URI cơ sở được coi là URI của tài liệu có chứa phần tử và không phải là URI của biểu định kiểu mà trong đó khai báo xuất hiện.

tập tin cây:

index.html 
css/style.css -> here the posted code 
img/cursors/openhand.cur 

Tốt tài liệu tham khảo:

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