Làm cách nào để tôi chỉ nhắm mục tiêu Internet Explorer 10 cho các tình huống nhất định như mã JavaScript dành riêng cho Internet Explorer hoặc mã dành riêng cho Internet Explorer?

160

Làm cách nào để tôi chỉ nhắm mục tiêu Internet Explorer 10 cho các tình huống nhất định như mã JavaScript dành riêng cho Internet Explorer hoặc mã dành riêng cho Internet Explorer?

Tôi đã thử điều này, nhưng nó không hoạt động:

<!--[if IE 10]>    <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Internet Explorer 10 bỏ qua các bình luận có điều kiện và sử dụng <html lang="en" class="no-js">thay vì <html class="no-js ie10" lang="en">.

javascript  html  css  internet-explorer-10  conditional-comments 
— trusktr
nguồn
8
Tôi nghĩ một câu hỏi tốt hơn sẽ là: Làm thế nào để CSS này trông giống nhau trên cả hai trình duyệt?
— BentOnCoding
12
IE10 PP4 Vẫn hỗ trợ @cc_ontuyên bố . Vì vậy, để phát hiện xem IE10 có được hỗ trợ hay không, bạn có thể sử dụng mã sau : <!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className+=' ie10';}</script><!--<![endif]-->. (Tôi đã đăng bài này dưới dạng bình luận, vì IE vẫn đang trong quá trình phát triển, vì vậy không biết liệu bản phát hành cuối cùng có hỗ trợ tính năng này hay không)
— Rob W
15
@RobW - Mã ví dụ của bạn sẽ bị sai khi eg11 hết. Phiên bản <script>if(Function('/*@cc_on return document.documentMode===10@*/')()){document.documentElement.className+=' ie10';}</script>cải tiến : Cải tiến: không cần bình luận có điều kiện; hoạt động ngay cả khi bình luận tước nén / xử lý; không có lớp nào được thêm cho eg11; sẽ hoạt động với eg11 chạy ở chế độ tương thích eg10; không cần thẻ script độc lập (chỉ có thể được thêm vào javascript khác trong đầu).
— robocat
2
Ví dụ về các đoạn mã trên: jsbin.com/upofoq/2
— robocat
8
Một giải pháp chung hơn là: if(document.documentMode) document.documentElement.className+=' ie'+document.documentMode+'mode';- giải quyết 90% các vấn đề (đôi khi các chế độ tương thích không thành công, trong trường hợp đó bạn cần một mức sửa chữa khác ở trên đó).
— robocat

Câu trả lời:

65

Có lẽ bạn có thể thử một số jQuery như thế này:

if ($.browser.msie && $.browser.version === 10) {
  $("html").addClass("ie10");
}

Để sử dụng phương thức này, bạn phải bao gồm thư viện Di chuyển jQuery vì hàm này đã bị xóa khỏi thư viện jQuery chính.

Làm việc khá tốt cho tôi. Nhưng chắc chắn không có sự thay thế cho ý kiến ​​có điều kiện!

— Tối đa nghệ thuật
nguồn
3
Tôi không chắc chắn về các bạn nhưng tôi cần sử dụng == '10.0'nó để làm việc
— lulalala
112
Cảnh báo: jQuery.browserkhông còn khả dụng trong phiên bản hiện tại của jQuery (1.9) mà không có plugin. blog.jquery.com/2013/01/15/15
— dave1010
2
Tôi muốn giới thiệu: if (jQuery.browser.msie && jQuery.browser.version < 10) { // do what you will here }Lưu ý verion <10 để phát hiện các phiên bản IE cũ hơn. IE10 trở lên hoạt động tốt với tất cả CSS3, HTML5, jquery, v.v.
— Dan Mantyla
1
@dan vì các nhận xét có điều kiện hoạt động trong tất cả các trình duyệt IE dưới 10 sử dụng chúng thay vì làm lộn xộn JS của bạn cho tất cả các trình duyệt. Chỉ cần nói <! - [if lte IE 9]> và bạn có thể nhắm mục tiêu tất cả các phiên bản IE dưới 10. Không yêu cầu JS.
— edhurtig
1
@ Marc-AndréLafortune nêu lên một điểm tốt. Theo nguyên tắc thông thường, bạn nên luôn luôn sử dụng toán tử === và không ==. Khi viết javascript bạn cần lưu ý về điều này. stackoverflow.com/questions/359494/ trộm
— Stewart
132

Tôi sẽ không sử dụng JavaScript navigator.userAgenthoặc $ .browser (sử dụng navigator.userAgent) vì nó có thể bị giả mạo.

Để nhắm mục tiêu Internet Explorer 9, 10 và 11 (Lưu ý: cũng là Chrome mới nhất):

@media screen and (min-width:0\0) { 
    /* Enter CSS here */
}

Để nhắm mục tiêu Internet Explorer 10:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS here */
}

Để nhắm mục tiêu Trình duyệt Edge:

@supports (-ms-accelerator:true) {
  .selector { property:value; } 
}

Nguồn:

— Roni
nguồn
Điều đó thực sự tốt đẹp. Nhưng chúng ta nên quan tâm như thế nào khi thử nghiệm các chế độ tài liệu khác nhau đối với các chế độ trình duyệt trong IE? Trong những tình huống nào chúng ta có thể mong đợi người dùng trực tuyến sử dụng một chế độ tài liệu khác với chế độ trình duyệt hiện tại của họ?
— klewis
mọi người thường không thay đổi chế độ tài liệu. Họ có thể, nhưng tôi không bắt gặp bất kỳ trang web nào yêu cầu người dùng thay đổi chế độ tài liệu. Nếu bạn đang sử dụng DOCTYPE chính xác thì đây không phải là vấn đề.
— Roni
3
Bạn là người hùng của tôi! Chỉ cần một lưu ý, Điều này cũng đã sửa một số nội dung bị rối trong IE11
— locrizak
8
Điều này cũng ảnh hưởng đến IE11 - vì vậy nếu bạn đang tìm giải pháp để chỉ nhắm mục tiêu IE9 / 10 thì cái này sẽ không hoạt động :-(
— Lukasz Lenart
1
Ý bạn là gì khi "tất cả bọn họ đang phát hiện trình duyệt qua navigator.userAgent"? Biên dịch có điều kiện là một tính năng tích hợp trong thời gian chạy JScript, không thể giả mạo thông qua chuỗi tác nhân người dùng.
— BoltClock
111

Tôi tìm thấy một giải pháp trên trang này nơi ai đó có một nhận xét có giá trị :

Giải pháp là:

if (Function('/*@cc_on return document.documentMode===10@*/')()){
    document.documentElement.className+=' ie10';
}

Nó

  • không cần bình luận có điều kiện;
  • hoạt động ngay cả khi bình luận tước nén / xử lý;
  • không có lớp eg10 được thêm vào trong Internet Explorer 11;
  • nhiều khả năng hoạt động như dự định với Internet Explorer 11 đang chạy trong chế độ tương thích Internet Explorer 10;
  • không cần thẻ tập lệnh độc lập (chỉ có thể được thêm vào mã JavaScript khác trong phần đầu).
  • không cần jQuery để kiểm tra
— Willem de Wit
nguồn
3
@ dave1010 Tác nhân người dùng có thể dễ dàng bị giả mạo. Nhận xét có điều kiện chỉ được hỗ trợ bởi công cụ JScript, chỉ có sẵn trong IE4 + (bao gồm 10).
— Rob W
2
@ dave1010 Viết một trình phân tích cú pháp làm việc mà những gì bạn mô tả là khó khăn và cực kỳ khó xảy ra. Bất cứ ai cố tình tạo và cài đặt một tiện ích mở rộng như vậy rất có thể có ý định "hành động như" IE (có lẽ cho mục đích thử nghiệm tự động trên các môi trường không phải Windows?). Sự tin tưởng 100% không bao giờ được đảm bảo trong các trình duyệt, nhưng bạn có thể đủ gần. Nhận xét có điều kiện là một cách rất đáng tin cậy để phát hiện công cụ JScript, được sử dụng bởi IE.
— Rob W
3
nhược điểm duy nhất tôi có thể thấy là nó yêu cầu js, điều kiện không có
— James Westgate
4
Đây phải là câu trả lời hàng đầu và yêu cầu JS phải được đưa ra cho người dùng IE10 - nếu JS bị vô hiệu hóa, nó có thể sẽ chỉ là addon NoScript. Tôi nghĩ rằng chúng ta cần giáo dục công khai nhiều hơn về sự ngu ngốc của NoScript (trái ngược với các addon lành mạnh như AdBlock hoặc Ghostery).
— iono
8
Tôi khuyên bạn nên sử dụng mã thay thế được cung cấp bởi tác giả: if (/*@cc_on!@*/false && document.documentMode === 10) {}điều này xoay quanh các cảnh báo tệ hại trong các chương trình linting.
— ajbeaven
62

Internet Explorer 10 không cố đọc bình luận có điều kiện nữa. Điều này có nghĩa là nó sẽ đối xử với các bình luận có điều kiện giống như bất kỳ trình duyệt nào khác: như các bình luận HTML thông thường, có nghĩa là bị bỏ qua hoàn toàn. Nhìn vào đánh dấu được đưa ra trong câu hỏi làm ví dụ, tất cả các trình duyệt bao gồm IE10 sẽ bỏ qua các phần bình luận, được tô sáng màu xám, hoàn toàn. Tiêu chuẩn HTML5 không đề cập đến cú pháp nhận xét có điều kiện và đây chính xác là lý do tại sao họ đã chọn ngừng hỗ trợ nó trong IE10.

Tuy nhiên, lưu ý rằng việc biên dịch có điều kiện trong JScript vẫn được hỗ trợ, như thể hiện trong các bình luận cũng như các câu trả lời gần đây hơn. Nó cũng sẽ không biến mất trong bản phát hành cuối cùng, không giống nhưjQuery.browser . Và tất nhiên, không cần phải nói rằng việc đánh hơi tác nhân người dùng vẫn mong manh như mọi khi và không bao giờ nên được sử dụng trong bất kỳ trường hợp nào.

Nếu bạn thực sự phải nhắm mục tiêu IE10, hãy sử dụng trình biên dịch có điều kiện vẫn có thể thấy hỗ trợ trong tương lai gần hoặc - nếu bạn có thể giúp nó - sử dụng thư viện phát hiện tính năng như Modernizr thay vì (hoặc kết hợp với) phát hiện trình duyệt. Trừ khi trường hợp sử dụng của bạn yêu cầu noscript hoặc cung cấp IE10 ở phía máy chủ, việc đánh hơi tác nhân người dùng sẽ gây đau đầu hơn là một lựa chọn khả thi.

Nghe có vẻ khá cồng kềnh, nhưng hãy nhớ rằng với tư cách là một trình duyệt hiện đại tuân thủ các tiêu chuẩn Web 1 ngày nay , giả sử bạn đã viết mã có thể tương thích với tiêu chuẩn cao, bạn không nên đặt mã đặc biệt cho IE10 trừ khi thực sự cần thiết, tức là nó phải giống với các trình duyệt khác về mặt hành vi và kết xuất. 2 Nghe có vẻ xa vời, với lịch sử của IE, nhưng bạn đã mong đợi Firefox hoặc Chrome hành xử theo cách tương tự như thế nào khi chỉ gặp phải sự mất tinh thần?

Nếu bạn làm có một lý do chính đáng để được nhắm mục tiêu các trình duyệt nhất định, bằng mọi cách sniff chúng ra với các công cụ khác dành cho bạn. Tôi chỉ nói rằng bạn sẽ khó khăn hơn nhiều để tìm ra lý do như vậy ngày nay so với trước đây và đó thực sự không phải là thứ bạn có thể dựa vào.

1 Không chỉ IE10, mà cả IE9 và thậm chí IE8 xử lý hầu hết các tiêu chuẩn CSS2.1 hoàn thiện tốt hơn nhiều so với Chrome, đơn giản vì IE8 rất tập trung vào việc tuân thủ các tiêu chuẩn (lúc đó CSS2.1 đã khá ổn định chỉ với những khác biệt nhỏ từ khuyến nghị ngày nay) trong khi Chrome dường như chỉ còn hơn một bản demo công nghệ nửa vời về các tiêu chuẩn giả tiên tiến.

2 Và tôi có thể bị thiên vị khi tôi nói điều này, nhưng nó chắc chắn như địa ngục. Nếu mã của bạn hoạt động trong các trình duyệt khác nhưng không phải IE, thì tỷ lệ xảy ra với mã của chính bạn thay vì IE10 tốt hơn nhiều so với 3 năm trước, với các phiên bản IE trước. Một lần nữa, tôi có thể bị thiên vị, nhưng hãy trung thực: bạn cũng vậy à? Chỉ cần nhìn vào ý kiến ​​của bạn.

— BoltClock
nguồn
20
Chhhh, yeah, IE10 vẫn thua xa webkit và tắc kè. Tôi có một số CSS trông rất đẹp trong webkit và gớm ghiếc trong IE10. Nếu tôi không thể tìm ra cách áp dụng có chọn lọc các kiểu, thì tôi sẽ phải từ bỏ các kiểu đó. :(
— trusktr
2
Giá trị của nó chỉ ra rằng các bình luận có điều kiện đã bị xóa trong IE10 vì giờ đây nó có trình phân tích cú pháp HTML5. Nhận xét có điều kiện không hợp lệ theo thuật toán phân tích cú pháp HTML5. Xem phần tính năng cũ của blog.msdn.com/b/ie/archive/2011/07/06/ Kẻ
— David Storey
3
@trusktr nếu bạn viết mã tốt thì nó sẽ trông tốt trong tất cả các trình duyệt mới nhất.
— Klevis Miho
10
@KlevisMiho Không đúng, Chrome và Firefox hỗ trợ các tính năng mà IE không có, ngay cả khi được mã hóa tốt. Nếu bạn có nghĩa là "chỉ sử dụng các tính năng phổ biến" thì đó không hoàn toàn giống như "mã tốt".
— trusktr
5
@Dan Mantyla: Trong trường hợp đó,<!--[if !IE]><!-->stuff you don't want IE9 and below to see<!--<![endif]-->
— BoltClock
36

Một nơi tốt để bắt đầu là Tài liệu Hỗ trợ Tiêu chuẩn IE .

Đây là cách nhắm mục tiêu IE10 trong JavaScript:

if ("onpropertychange" in document && !!window.matchMedia) {
...
}

Đây là cách nhắm mục tiêu IE10 trong CSS:

@media all and (-ms-high-contrast: none) {
...
}

Trong trường hợp IE11 cần được lọc hoặc đặt lại qua CSS, hãy xem một câu hỏi khác: Làm thế nào để viết một bản hack CSS cho IE 11?

— Paul Sweatte
nguồn
5
Giải pháp CSS của bạn cũng ảnh hưởng đến IE11: \
— Lukasz Lenart
11

Cả hai giải pháp được đăng ở đây (với sửa đổi nhỏ) hoạt động:

<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className='ie10';}</script><!--<![endif]-->

hoặc là

<script>if(Function('/*@cc_on return 10===document.documentMode@*/')()){document.documentElement.className='ie10';}</script>

Bạn bao gồm một trong các dòng trên bên trong thẻ head của trang html của bạn trước liên kết css của bạn. Và sau đó trong tệp css, bạn chỉ định kiểu của mình có lớp "eg10" là cha mẹ:

.ie10 .myclass1 { }

Và Voila! - các trình duyệt khác vẫn còn nguyên. Và bạn không cần jQuery. Bạn có thể xem ví dụ về cách tôi triển khai nó ở đây: http://kardash.net .

— Kardash
nguồn
11

Tôi đã viết một plugin JavaScript nhỏ, vanilla có tên là Layout Engine , cho phép bạn phát hiện IE 10 (và mọi trình duyệt khác), theo cách đơn giản không thể làm giả, không giống như tác nhân người dùng đánh hơi.

Nó thêm tên công cụ kết xuất dưới dạng một lớp trên thẻ html và trả về một đối tượng JavaScript có chứa nhà cung cấp và phiên bản (nếu thích hợp)

Kiểm tra bài đăng trên blog của tôi: http://mattstow.com/layout-engine.html và nhận mã trên GitHub: https://github.com/stowball/Layout-Engine

— Matt Stow
nguồn
7

Tôi sử dụng kịch bản này - nó lỗi thời, nhưng hiệu quả trong việc nhắm mục tiêu một riêng biệt trình duyệt Internet Explorer 10 style sheet hoặc file JavaScript được bao gồm chỉ khi trình duyệt là Internet Explorer 10, giống như cách bạn làm với ý kiến có điều kiện. Không có jQuery hoặc plugin khác là bắt buộc.

<script>
    /*@cc_on
      @if (@_jscript_version == 10)
          document.write(' <link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
      @end
    @*/
</script >
— Con nợ
nguồn
2
Mát mẻ. Bạn có thể thêm một chút thông tin về những @statements đó là gì không?
— trusktr
6

Bạn có thể sử dụng PHP để thêm biểu định kiểu cho IE 10

Giống:

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
    <link rel="stylesheet" type="text/css" href="../ie10.css" />
}
— Lenny Bruyninckx
nguồn
2
Sẽ không có ý nghĩa gì khi đặt chuỗi trên vì dải phân cách không phân biệt chữ hoa chữ thường;)
— mgutt
2
Tôi luôn cám dỗ điều này, nhưng sau đó hãy nhớ rằng nó bị hỏng khi có cdn / cache / proxy ở giao diện người dùng.
— Johan
5

Nếu bạn phải làm điều này, bạn có thể kiểm tra chuỗi tác nhân người dùng trong JavaScript:

var isIE10 = !!navigator.userAgent.match(/MSIE 10/);

Như những người khác đã đề cập, tôi luôn khuyên bạn nên phát hiện tính năng thay thế.

— dave1010
nguồn
`` !! `dùng để làm gì?
— Francisco Corrales Morales
4
String.match()sẽ trả về một mảng cho khớp hoặc null nếu không. !(String.match())làm cho nó trả về false cho một trận đấu hoặc đúng cho không có trận đấu. !(!(String.match()))làm cho nó trở lại đúng cho một trận đấu hoặc sai cho không có trận đấu. !(!(something))hoặc !!somethingdo đó chuyển đổi bất cứ điều gì thành boolean đúng / sai. stackoverflow.com/questions/784929/ móc
— dave1010
@FranciscoCorralesMorales Ôi số lần tôi được hỏi rằng khi mã của tôi bị kiểm tra kỹ lưỡng. :) Là một bản mở rộng cho nhận xét tuyệt vời của dave1010, nó có thể được sử dụng để ép buộc các giá trị 'trung thực' hoặc 'giả mạo' thành một booleangiá trị nội tại , ví dụ var name = 'me', hasName = !!name;.
— WynandB
4

Nếu bạn muốn nhắm mục tiêu IE 10 bằng Vanilla JavaScript, bạn có thể muốn thử phát hiện thuộc tính CSS: 

if (document.body.style.msTouchAction != undefined) {
  document.body.className = 'ie10';
}

Thuộc tính CSS

Thay vì msTouchActionbạn cũng có thể sử dụng một trong các thuộc tính CSS này, vì chúng hiện chỉ có sẵn trong IE 10. Nhưng điều này có thể thay đổi trong tương lai.

  • msTouchAction
  • msWrapFlow
  • msWrapMargin
  • msWrapThông qua
  • msScrollLimit
  • msScrollLimitXMin
  • msScrollLimitYMin
  • msScrollLimitXMax
  • msScrollLimitYMax
  • msFlexbox
  • msFlex
  • msFlexOrder

Trang thử nghiệm

Tôi đã kết hợp một trang thử nghiệm với tất cả các thuộc tính trên CodePen.

— TimPietrusky
nguồn
3

clipBoardData là một chức năng chỉ có trong IE, vì vậy nếu bạn đang tìm cách nhắm mục tiêu tất cả các phiên bản IE, bạn có thể sử dụng

<script type="text/javascript">
if (window.clipboardData)
            alert("You are using IE!");
</script>
— Njaal Gjerde
nguồn
-1: nhưng còn phiên bản thì sao? Làm thế nào bạn có thể biết phiên bản nào?
— Francisco Corrales Morales
Trình duyệt Edge cũng không có "window.clipboardData"
— AFD
@AFD Câu hỏi này là về IE, không phải Edge.
— TylerH
3

CSS cho IE10 + và IE9

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ styles */
}

@media screen\0 {
    /* IE8,9,10 styles*/
}
— svnm
nguồn
1

Bạn có thể sử dụng tính năng phát hiện để xem trình duyệt là IE10 hay cao hơn như vậy:

var isIE = false;
if (window.navigator.msPointerEnabled) {
    isIE = true;
}

Chỉ đúng nếu> IE9

— George Filippakos
nguồn
1

Với JavaScript:

if (/Trident/g.test(navigator.userAgent)) { // detect trident engine so IE
        document.getElementsByTagName('html')[0].className= 'no-js ie'; }

Làm việc cho tất cả IE.

IE08 => 'Trident/4.0'

IE09 => 'Trident/5.0'

IE10 => 'Trident/6.0'

IE11 => 'Trident/7.0'

Vì vậy, thay đổi /Trident/gtheo /Trident/x.0/gnơi x = 4, 5, 6hoặc 7(hoặc có thể 8cho tương lai).

— Sự kiện Ender
nguồn
1

Tôi chỉ muốn thêm phiên bản phát hiện IE của tôi. Nó dựa trên một đoạn mã được tìm thấy tại http://james.padolsey.com/javascript/detect-ie-in-js-USE-conditable-comments/ và được mở rộng để hỗ trợ eg10 và eg11. Nó phát hiện IE 5 đến 11.

Tất cả bạn cần làm là thêm nó ở đâu đó và sau đó bạn luôn có thể kiểm tra với một điều kiện đơn giản. Var toàn cầu isIEsẽ không được xác định nếu đó không phải là IE, hoặc nếu không nó sẽ là số phiên bản. Vì vậy, bạn có thể dễ dàng thêm những thứ như if (isIE && isIE < 10)hoặc giống nhau.

var isIe = (function(){
    if (!(window.ActiveXObject) && "ActiveXObject" in window) { return 11; /* IE11 */ }
    if (Function('/*@cc_on return /^10/.test(@_jscript_version) @*/')()) { return 10; /* IE10  */ }
    var undef,
        v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
            all[0]
        );
    return v > 4 ? v : undef;
}());
— Tháng một.
nguồn
0

Đối với tôi đoạn mã sau hoạt động tốt, tất cả các bình luận có điều kiện đều hoạt động trong tất cả các phiên bản IE:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 11)|!(IE)]><!--> <html> <!--<![endif]-->

<script>
    if (document.documentMode===10){
        document.documentElement.className+=' ie10';
    }
    else if (document.documentMode===11){
        document.documentElement.className+=' ie11';
    }
</script>

Tôi đang dùng windows 8.1, không chắc nó có liên quan đến bản cập nhật eg11 không ...

— Alex
nguồn
1
Các (gt IE 11)bit là hoàn toàn không cần thiết. Bạn cũng có thể chỉ cần làm <!--[if !(IE)]<!-->thay thế.
— BoltClock
BoltClock nếu (gt IE 11) bị bỏ qua và trình duyệt của người dùng là IE 12 (khi nó xuất hiện) sẽ không có phần tử html nào được xác định.
— Leonardo Gonzalez
0

Đây là cách tôi thực hiện CSS tùy chỉnh cho Internet Explorer:

Trong tệp JavaScript của tôi:

function isIE () {
      var myNav = navigator.userAgent.toLowerCase();
      return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

jQuery(document).ready(function(){
    if(var_isIE){
            if(var_isIE == 10){
                jQuery("html").addClass("ie10");
            }
            if(var_isIE == 8){
                jQuery("html").addClass("ie8");
                // you can also call here some function to disable things that 
                //are not supported in IE, or override browser default styles.
            }
        }
    });

Và sau đó trong tệp CSS của tôi, y xác định từng kiểu khác nhau:

.ie10 .some-class span{
    .......
}
.ie8 .some-class span{
    .......
}
— Francisco Corrales Morales
nguồn
0

sử dụng babel hoặc typecript để chuyển đổi mã này js

const browser = () => {
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3576.0 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.17 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0"
    // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko"
    // "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    const _userAgent = navigator.userAgent;
    const br = {
        "Chrome": "Chrome",
        "Edge": "Edge",
        "Firefox": "Firefox",
        ".NET CLR": "Internet Explorer 11",
    };
    const nobr = {
        "MSIE 10.0": "Internet Explorer 10",
        "MSIE 9.0": "Internet Explorer 9",
        "MSIE 8.0": "Internet Explorer 8",
        "MSIE 7.0": "Internet Explorer 7"
    };
    let thisBrow = "Unknown";
    for (const keys in br) {
        if (br.hasOwnProperty(keys)) {
            if (_userAgent.includes(keys)) {

                thisBrow = br[keys];

                for (const key in nobr) {
                    if (_userAgent.includes(key)) {
                        thisBrow = nobr[key];
                    }
                }

            }
        }
    }

    return thisBrow;
};
Mở rộng đoạn trích

— Aliaksandr Shpak
nguồn
Xin chào Aliaksandr, cảm ơn vì ý tưởng! Không chắc chắn tại sao một người nào đó bị hạ thấp, nhưng tôi đã đánh giá cao bởi vì câu trả lời ít nhất là một gợi ý hữu ích. Bất cứ ai downvote, tại sao không giúp đỡ một người dùng mới với lời khuyên hữu ích?
— trusktr
-2

Câu trả lời này đã giúp tôi đạt 90%. Tôi tìm thấy phần còn lại của câu trả lời của tôi trên trang web của Microsoft ở đây .

Mã dưới đây là những gì tôi đang sử dụng để nhắm mục tiêu tất cả tức là bằng cách thêm một lớp .ie vào <html>

Sử dụng jQuery (không dùng .browser có lợi cho tác nhân người dùng trong 1.9+, xem http://api.jquery.com/jQuery.browser/ ) để thêm lớp .ie:

// ie identifier
$(document).ready(function () {
  if (navigator.appName == 'Microsoft Internet Explorer') {
    $("html").addClass("ie");
  }
});
— bdanin
nguồn
"không tán thành .browser ủng hộ tác nhân người dùng trong 1.9+" Nó không nói "có lợi cho tác nhân người dùng" - bất kể điều đó có nghĩa là gì - nó nói có lợi cho việc phát hiện tính năng .
— BoltClock
-2

Nếu bạn không ngại nhắm mục tiêu IE10 trở lên và các trình duyệt không phải IE, bạn có thể sử dụng nhận xét có điều kiện này:

<!--[if gt IE 9]><!--> Your code here. <!--<![endif]-->

Bắt nguồn từ http://www.paulirish.com/2008/conditable-stylesheets-vs-css-hacks-answer-neither

— người dùng 1003757
nguồn
1
Tôi không -1 câu trả lời của bạn nhưng liên kết có vẻ hơi outd- Tám -ed. Cũng đáng lưu ý rằng OP chỉ nhắm mục tiêu IE10 và IE10. Bất kể, đoạn mã của bạn sẽ không hoạt động cho IE10 trở lên hoặc bất kỳ trình duyệt không phải IE nào khác, bởi vì các nhận xét có điều kiện chỉ được hỗ trợ trong IE5 cho đến IE9.
— WynandB
-2

Nếu bạn thực sự phải làm, bạn có thể làm cho các bình luận có điều kiện hoạt động bằng cách thêm dòng sau vào <head>:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

Nguồn

— nyuszika7h
nguồn
-4

giải pháp hiện đại cho css

html[data-useragent*='MSIE 10.0'] .any {
  your-style: here;
}
— Raphael
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.