Xem bài viết Khắc phục lỗi CSS để trang web chạy tốt trên các trình duyệt

Khắc phục lỗi CSS để trang web chạy tốt trên các trình duyệt

Aug 22, 2012Html / Css
Bây giờ mình cùng bắt đầu tìm hiểu cách khắc phục của từng trình duyệt nhé.

1. FireFox - FF

Đây có thể nói là trình duyệt khá phổ biến với chúng ta, nhưng đôi khi cũng cần một vài điểm nhỏ để khắc phục lỗi css đối với trình duyệt này khi hiển thị website của mình.
	
	/*=== Firefox 2 ===*/
	html>/**/body .selector, x:-moz-any-link {
		color:red;
	}

	/*=== Firefox 3 ===*/
	html>/**/body .selector, x:-moz-any-link, x:default {
		color:red;
	}
	
	/*=== Tất cả Firefox ===*/
	@-moz-document url-prefix() { 
		.selector {
			color:red;
		}
	}
	

2. Internet Explorer - IE

IE có thể nói là 1 trình duyệt cứng đầu nhất trong tất cả trình duyệt, vì thế phần này mình sẽ giới thiệu một số cách để khắc phục lỗi css khi hiển thị website trên trình duyệt này.
	/*=== IE 5.5 ===*/
	#selector {
	   margin/: 0 10px 0 5px; 		/* IE5.5 */
	}
   
	/*=== IE 6 ===*/
	body #ie6{
	  _display: block;
	}	
	* html #selector {
	   margin: 0 10px 0 5px; 		/* IE6 */
	}
	#selector {
	   _margin: 0 10px 0 5px; 		/* IE6 */
	}
		
	/*=== IE 7 ===*/
	html > body #ie7{
	  *display: block;
	}
	#selector {
	   *margin: 0 10px 0 5px; 		/* IE7 */
	}
  
	/*=== IE6, IE7 ===*/
	#selector { 
		*color: blue; 			/* hoặc #color: blue */ 
	}
	
	/*=== Tất cả nhưng trừ IE6 ===*/
	#selector {
		color/**/: blue; 
	}
	 
	/*=== IE6, IE7, IE8 ===*/
	#selector {
		color: blue9; 
	}
	 
Ngoài ra bạn có thể đơn giản bằng cách viết: #ie6 #selector{} ; #ie7 #selector{} ; ... Bạn có thể định dạng selector mà bạn muốn trên các IE đó.

3. Safari

Safari, một trình duyệt mà tôi chưa dùng lần nào, nghe nói nó được dùng khá phổ biến cho các dòng máy MAC.
	
	/*=== Safari ===*/
	@media screen and (-webkit-min-device-pixel-ratio:0)  {
		#safari { display: block; }
	}

4. Opera

Một trình duyệt khá hay về tốc độ cũng như cách hiển thị các feed bài viết một cách hoàn hảo.
	
	/*=== Opera ===*/
	@media all and (-webkit-min-device-pixel-ratio:10000), 
	not all and (-webkit-min-device-pixel-ratio:0) {
		head~body #opera { display: block; }
	}
	
	/*=== Opera 9 và cũ hơn ===*/
	html:first-child #selector {
		margin: 0 10px 0 5px; 		
    }

5. Chrome

Chrome là trình duyệt mà tôi dùng mặc định khi lướt web của mình, chrome thật sự là một trình duyệt có tốc độ nhanh, nhanh hơn cả firefox, điều này đã được tôi chứng minh. Nhưng cũng như các trình duyệt khác, để cho website của mình chạy thống nhất được trên các trình duyệt khác nhau thì nó cũng cần khắc phục một vài lỗi css khi hiển thị.
	
	/*=== Chrome 1+ ===*/
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		#diez  { color: red  }
	}
Theo như mình biết thì đa số thì các trình duyệt hiển thị gần giống nhau, nếu có thì cũng chỉ xê dịch một ít. Còn riêng thằng IE thì khỏi nói, nó là trình duyệt cứng đầu và tệ nhất, nên bạn cần bỏ nhiều thời gian để check hết các phiên bản của nó nhé. Nhưng theo mình thì ở thời điểm hiện tại bạn chỉ cần test từ IE 7 trở lên thôi, vì IE 6 và IE 5.5 chắc cũng không ai còn dùng nữa.( Ý kiến riêng của mình thôi nhé.)

Kết luận

Bạn có thích bài viết này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, xin cảm ơn!

Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: 2Cweb.vn

 

Leave a Comments