2010-05-17 85 views
8

Tôi đã nhận thấy sự cố liên kết nhỏ trong ba trình duyệt chính khi hiển thị trang web của tôi. Như vậy làm cách nào tôi có thể thực hiện mã giả sau bằng CSS thuần túy?Kiểm tra CSS cho Chrome, IE, Firefox

if Webkit (Safari/Chrome) { 
    #myDIV {margin-top:-3px} 
} else if (Firefox) { 
    #myDIV {margin-top:0px} 
} else { // IE and other browsers 
    #myDIV {margin-top:1px} 
} 
+1

Tại sao bạn làm điều này? Thông thường, bạn có tệp CSS cơ sở, và sau đó với mã HTML, javascript hoặc mã phía máy chủ có điều kiện, bạn có điều kiện bao gồm tệp CSS dành riêng cho trình duyệt thích hợp, như ff3.css hoặc ie6.css. –

+0

Vì vậy, HTML có điều kiện để thực hiện những điều sau đây là gì? Yêu cầu của tôi là chỉ thay đổi số tiền ký quỹ trên một số đơn lẻ – hankh

+3

Tại sao không cho chúng tôi biết vấn đề thực sự - vấn đề liên kết là gì? – reisio

Trả lời

1

Bạn có thể sử dụng CSS Hack.

Tuy nhiên, tôi không khuyên bạn nên sử dụng.

Đối với IE, bạn có thể bao gồm một tập tin riêng biệt CSS hoặc <style> tag bên trong một conditional comment, như thế này:

<!--[if IE] <tag> <![endif]--> 
1

Nếu chỉ có một tài sản của mình, bạn không cần phải bình luận có điều kiện để bao gồm các file khác. Nhưng nếu bạn muốn theo cách đó, hãy làm như SLaks đã viết. Một cách tiếp cận khác là chỉ thêm một thuộc tính vào cuối lớp cụ thể của bạn với một hack cụ thể của trình duyệt.

.foo { 
    margin-top: 5px; // general property 
    _margin-top: 2px; //IE 6 and below 
} 

Hoặc bạn tách riêng lớp học và thêm vào lớp học chung của bạn một lớp trình duyệt cụ thể.

/* general */ 
foo { 
    width : 20em; 
} 

/* IE 6 */ 
* html foo { 
    width : 27em; 
} 

/* IE 7 */ 
* + html foo { 
    width : 29em; 
} 
0

Bạn có thể không thực sự làm điều này với CSS tinh khiết. Cách tốt nhất để làm như vậy là sử dụng mã phía máy chủ như ASP.NET hoặc PHP để đọc tiêu đề "user-agent" của yêu cầu HTTP và xác định trình duyệt mà khách truy cập của bạn đang sử dụng bằng cách tìm kiếm từ khóa trong chuỗi đó. Ví dụ, đại diện của tôi sử dụng là:

Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

gì bạn có thể làm là có một tập hợp các lệnh if-else tìm kiếm chuỗi trong user-agent như "Firefox" hoặc "MSIE" hoặc "WebKit" và sau đó phục vụ các tệp CSS riêng lẻ khác nhau tùy thuộc vào trình duyệt nào đang được sử dụng. Bạn có thể làm điều tương tự với JavaScript, nhưng hãy nhớ rằng người dùng có thể đã tắt JavaScript hoặc nhiều khả năng thiết bị của họ có thể không hỗ trợ JavaScript ... trong khi hầu như mọi yêu cầu HTTP đều gửi chuỗi tác nhân người dùng.

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