Chỉ áp dụng kiểu trên IE

183

Đây là khối CSS của tôi:

.actual-form table {
  padding: 5px 0 15px 15px;
  margin: 0 0 30px 0;
  display: block;
  width: 100%;
  background: #f9f9f9;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}

Tôi chỉ muốn IE 7, 8 và 9 "nhìn thấy" width: 100%

Cách đơn giản nhất để thực hiện điều này là gì?

css  internet-explorer 
— Theo dõi nhanh
nguồn
1
Tại sao bạn cố gắng làm điều này? Phiên bản IE nào bạn đang nhắm mục tiêu? Còn IE10 thì sao? (không hỗ trợ các nhận xét có điều kiện thông thường)
— ba mươi
Tôi đang cố gắng nhắm mục tiêu IE 7, 8 và 9.
— FastTrack
Lý do nào bạn có thể phải nhắm mục tiêu IE9 nhưng không phải IE10? Tôi rất muốn biết ...
— ba mươi
1
IE không diễn giải width: autocho các thành phần khối theo cách tương tự như các trình duyệt khác như Firefox hoặc Chrome. Trong Chrome / Firefox width:autosẽ mở rộng chiều rộng của phần tử khối toàn bộ chiều rộng của vùng chứa. IE không làm điều này và yêu cầuwidth: 100%
— FastTrack
1
— Pramesh Bajracharya

Câu trả lời:

102

Cập nhật 2017

Tùy thuộc vào môi trường, các bình luận có điều kiện đã chính thức bị loại bỏ và bị xóa trong IE10 +.

Nguyên

Cách đơn giản nhất có lẽ là sử dụng nhận xét có điều kiện Internet Explorer trong HTML của bạn:

<!--[if IE]>
<style>
    .actual-form table {
         width: 100%;
    }
</style>
<![endif]-->

Có rất nhiều hack (ví dụ như hack gạch dưới ) bạn có thể sử dụng sẽ cho phép bạn chỉ nhắm mục tiêu IE trong biểu định kiểu của mình, nhưng sẽ rất lộn xộn nếu bạn muốn nhắm mục tiêu tất cả các phiên bản IE trên tất cả các nền tảng.

— James Allardice
nguồn
10
Có cách nào để sử dụng nhận xét có điều kiện đó trong tệp CSS của tôi không? Tôi muốn tránh làm lộn xộn HTML của mình nếu tôi có thể giúp nó.
— FastTrack
2
@FastTrack - Không, nhận xét có điều kiện là nhận xét HTML để chúng phải xuất hiện trong đánh dấu của bạn. Tôi có xu hướng tạo một biểu định kiểu hoàn toàn mới chỉ dành cho IE, và sau đó đưa nó vào như bình thường trong các nhận xét có điều kiện.
— James Allardice
James: Tôi đã nghĩ đến việc làm điều này, nhưng sau đó tôi phải tranh luận về việc cập nhật hai bảng định kiểu riêng biệt mỗi khi tôi muốn thay đổi điều gì đó, phải không?
— FastTrack
3
@FastTrack - Không, biểu định kiểu IE của bạn sẽ chỉ chứa các kiểu dành riêng cho IE. Bao gồm nó sau biểu định kiểu chính của bạn để bạn có thể ghi đè các kiểu được đặt trong biểu định kiểu chính của bạn khi cần thiết. Vì vậy, bạn sẽ chỉ cần cập nhật nó nếu bạn muốn thay đổi một cái gì đó cụ thể cho IE.
— James Allardice
1
@FastTrack - Có. Khi một cái gì đó được chỉ định trong nhiều hơn một bản định kiểu, cái được bao gồm sau sẽ được ưu tiên.
— James Allardice
283 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #myElement {
        /* Enter your style code */
   }
}

Giải thích: Đây là một truy vấn phương tiện dành riêng cho Microsoft. Sử dụng thuộc tính tương phản cao -ms dành riêng cho Microsoft IE, nó sẽ chỉ được phân tích cú pháp trong Internet Explorer 10 trở lên. Tôi đã sử dụng cả hai giá trị hợp lệ của truy vấn phương tiện, do đó, nó sẽ chỉ được phân tích cú pháp bởi IE, cho dù người dùng có bật độ tương phản cao hay không.

— Himanshu Dwivingi
nguồn
6
chỉ có điều nó không hoạt động trên trình thám hiểm internet mới (cạnh), cần thêm nó mà không cần quá
— Saad Ahmed
6
Xem ở đây để nhắm mục tiêu cạnh: stackoverflow.com/questions/28417056/ từ
— Phyllis Sutherland
6
@SaadAhmed: Đó thực sự là một vấn đề? Edge là một trình duyệt hoạt động khá tốt, dù sao cũng tốt hơn IE, vì vậy nhiều vụ hack IE có lẽ sẽ không cần thiết (hoặc thận trọng)?
— Michael Scheper
1
Vâng, nó đã giải quyết vấn đề IE ngu ngốc của tôi. Cảm ơn đã sửa chữa!
— Jester
1
@MichaelScheper Lỗi này được đăng trong bình luận đầu tiên vẫn được áp dụng ở cạnh mới nhất (17 cho ngày hôm nay). Bản sửa lỗi nhỏ của Saad đã giúp tôi xóa bỏ vấn đề này.
— SimonRợi
54

Ngoài các ý kiến ​​có điều kiện về IE, đây là danh sách cập nhật về cách nhắm mục tiêu IE6 đến IE10.

Xem các bản hack CSS & JS cụ thể ngoài IE .

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

/* IE9, IE10, IE11 */
@media screen and (min-width:0\0) {
    #veintidos { color: red}
}


/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}
— Oriol
nguồn
1
Tôi đã thử \9và \0/cho displaymột bộ chọn lớp, nhưng cả hai cũng sẽ áp dụng cho IE10. Có cách nào để chỉ áp dụng cho IE9 [và bên dưới hay không]?
— Tom Brito
Bạn có thể thử: \0/IE9nhưng chưa thử. Mặt khác, tôi không biết cách nào khác để nhắm mục tiêu IE9 trừ khi bạn sử dụng các mệnh đề có điều kiện:<!--[if IE 9]><link rel="stylesheet" type="text/css" href="ie9-specific.css" /><![endif]-->
— Oriol
1
Bản @media screen and (min-width:0\0) {hack dường như cũng được phân tích cú pháp bởi IE11 - vì vậy nó không chỉ là 9 và 10 - vui lòng kiểm tra kỹ và cập nhật nhận xét của bạn.
— Rolf
Tôi đã sử dụng màn hình @media và (-ms-độ tương phản cao: hoạt động), (-ms-độ tương phản cao: không) {} Nó hoạt động tốt.
— Harsimer
43

Có nhiều bản hack cho IE

Sử dụng nhận xét có điều kiện với biểu định kiểu

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

Sử dụng ý kiến ​​có điều kiện với phần đầu css

<!--[if IE]>
<style type="text/css">
    /************ css for all IE browsers ****************/
</style>
<![endif]-->

Sử dụng nhận xét có điều kiện với các yếu tố HTML

<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->

Sử dụng truy vấn phương tiện truyền thông

 IE10+
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 selector { property:value; }
 }

 IE6,7,9,10
 @media screen and (min-width: 640px), screen\9 {
 selector { property:value; }
 }

 IE6,7
 @media screen\9 {
  selector { property:value; }
 }

 IE8
 @media \0screen {
  selector { property:value; }
 }

 IE6,7,8
 @media \0screen\,screen\9 {
  selector { property:value; }
 }

 IE9,10
 @media screen and (min-width:0\0){
  selector { property:value; }
 }
— Santosh Khalse
nguồn
Lưu ý rằng cái cuối cùng được liệt kê ( min-width:0\0) cũng áp dụng cho IE11
— CBarr
26

Cũng như một nhận xét có điều kiện cũng có thể sử dụng Bộ chọn trình duyệt CSS http://rafael.adm.br/css_browser_selector/ vì điều này sẽ cho phép bạn nhắm mục tiêu các trình duyệt cụ thể. Sau đó, bạn có thể đặt CSS của mình là

.ie .actual-form table {
    width: 100%
    }

Điều này cũng sẽ cho phép bạn nhắm mục tiêu các trình duyệt cụ thể trong biểu định kiểu chính của bạn mà không cần bình luận có điều kiện.

— frontendzzzguy
nguồn
Điều này dường như không có bất kỳ ảnh hưởng nào trong IE9
— FastTrack
Tôi không hiểu tại sao không, hãy thử .ie9 .actual-form bảng {width: 100%} trong CSS của bạn. Hy vọng rằng làm việc cho bạn.
— frontendzzzguy
.ie9không hoạt động vì nó chưa được cập nhật kể từ năm 2010
— Hanna
Đây chắc chắn là cách tiếp cận thanh lịch nhất. Cá nhân tôi thích thêm phía máy chủ bộ chọn css trình duyệt khi hiển thị trang.
— opsb
1
điều này hoạt động nếu bạn sử dụng các chuỗi tác nhân và tự động thêm lớp bộ chọn vào phần thân.
— pikapika
6

Tôi nghĩ rằng để thực hành tốt nhất, bạn nên viết câu lệnh điều kiện IE bên trong <head>thẻ mà bên trong có một liên kết đến biểu định kiểu đặc biệt của bạn. Đây có phải là sau khi liên kết css tùy chỉnh của bạn để nó ghi đè sau này, tôi có một trang web nhỏ vì vậy tôi sử dụng css ví dụ tương tự cho tất cả các trang.

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

điều này khác với câu trả lời của james như tôi nghĩ (ý kiến ​​cá nhân vì tôi làm việc với một nhóm thiết kế và tôi không muốn họ chạm vào các tệp html của tôi và làm hỏng một cái gì đó ở đó), bạn không bao giờ nên bao gồm các kiểu trong tệp html của mình.

— bạc elad
nguồn
6

Hơi muộn một chút nhưng cái này hoạt động hoàn hảo với tôi khi cố gắng ẩn nền cho IE6 & 7

.myclass{ 
    background-image: url("images/myimg.png");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 22px auto;
    padding-left: 48px;
    height: 42px;
    _background-image: none;
    *background-image: none;
}

Tôi đã nhận được bản hack này thông qua: http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/

#myelement
{
    color: #999; /* shows in all browsers */
    *color: #999; /* notice the * before the property - shows in IE7 and below */
    _color: #999; /* notice the _ before the property - shows in IE6 and below */
}
— osouthgate
nguồn
5

Chào mừng BrowserDetect - một chức năng tuyệt vời.

<script>
    var BrowserDetect;
    BrowserDetect = {...};//  get BrowserDetect Object from the link referenced in this answer
    BrowserDetect.init();
    // On page load, detect browser (with jQuery or vanilla)
    if (BrowserDetect.browser === 'Explorer') {
      // Add 'ie' class on every element on the page.
      $('*').addClass('ie');
    }
</script>

<!-- ENSURE IE STYLES ARE AVAILABLE -->
<style>
    div.ie {
       // do something special for div on IE browser.
    }
    h1.ie {
     // do something special for h1 on IE browser.
    }
</style>

Các Object BrowserDetect cũng cung cấpversion thông tin vì vậy chúng tôi có thể thêm các lớp học cụ thể - cho ex. $('*').addClass('ie9');nếu (BrowserDetect.version == 9).

Chúc may mắn....

— Akash
nguồn
4

Nó thực sự phụ thuộc vào các phiên bản IE ... Tôi đã tìm thấy tài nguyên tuyệt vời này được cập nhật từ IE6-10 :

Hack CSS cho Internet Explorer 6

Nó được gọi là Star HTML Hack và trông như sau:

  • html .color {color: # F00;} Bản hack này sử dụng CSS hoàn toàn hợp lệ.

Hack CSS cho Internet Explorer 7

Nó được gọi là Star Plus Hack.

*: con đầu lòng + html .color {color: # F00;} Hoặc phiên bản ngắn hơn:

* + html .color {color: # F00;} Giống như hack HTML sao, điều này sử dụng CSS hợp lệ.

Hack CSS cho Internet Explorer 8

@media \ 0screen {.color {color: # F00;}} Bản hack này không sử dụng CSS hợp lệ.

Hack CSS cho Internet Explorer 9

: root .color {color: # F00 \ 9;} Bản hack này cũng không sử dụng CSS hợp lệ.

Đã thêm 2013.02.04: Thật không may IE10 hiểu được hack này.

Hack CSS cho Internet Explorer 10

Màn hình @media và (-ms-high-tương phản: hoạt động), (-ms-high-tương phản: none) {.color {color: # F00;}} Bản hack này cũng không sử dụng CSS hợp lệ.

— Kim tự tháp
nguồn
Cái cuối cùng cũng áp dụng cho IE11
— CBarr
2

Dành cho / * Internet Explorer 9+ (một lớp) * /

_::selection, .selector { property:value\0; }

Chỉ có giải pháp này hoàn toàn làm việc cho tôi.

— La Mã
nguồn
Tôi biết đây là một vụ hoại tử, nhưng điều này có vẻ siêu lắt léo. Tuy nhiên, tôi không chắc chính xác những gì nó đang làm vì nó trông hơi phức tạp / byzantine. Bất cứ ai cũng biết ngữ nghĩa của tuyên bố này? (như _ :: và \ 0 ở cuối?)
— Adam R. Turner
1
Đồng thời áp dụng quy tắc cho Chrome: /
— trincot
2 
<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->

body.ie .actual-form table {
    width: 100%
}
— dxc111
nguồn
2

Dành cho IE9 +

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
   // IE9+ CSS
   .selector{
      color: red;
   }
}

IE Edge 12+

@supports (-ms-ime-align: auto) {
  .selector {
    color: red;
  }
}

Cái này hoạt động trên Edge và tất cả các IE

:-ms-lang(x), .selector { color: red; }
— Srinivasan N
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.