by Peter Tran on 19/09/2011, Lượt xem: 1.748
Double margin IE 6 là gì?
Lỗi Double margin xảy ra khi ta sử dụng margin-left cho một thành phần đã được gán float: left, hoặc margin-right cho một thành phần đã được gán float: right.
Ví dụ ta có thành phần div với class “box” và ta viết mã CSS như sau: .box{ float:left; margin-left:50px; padding: 10px; background: green}
Với những trình duyệt khác thì sẽ hiển thị bình thường và thành phần div.box sẽ được canh lề bên trái 50px. Nhưng với trình duyệt IE phiên bản 6 trở về trước (Tạm gọi là IE 6) thì giá trị margin sẽ bị gấp đôi (Double) và cách bên trái 100px.
Khắc phục lỗi Double margin trong IE 6
Cách khắc phục lỗi Double margin IE 6
1, Sử dụng display: inline
Chúng ta có thể gán thêm thuộc tính display: inline cho thành này để khắc phục hiện tượng trên, và chúng ta sẽ viết lại đoạn CSS trên như sau: .box{ float:left; margin-left:50px; padding: 10px; background: green; display: inline}
Chú ý: Chúng ta có thể kiểm tra phiên bản trình duyệt đang sử dụng, khi trình duyệt là IE 6 thì ta sẽ áp dụng quy luật này, để tránh những mã CSS không cần thiết. Trong thiết kế web đây gọi là CSS hack.
Trước tiên ta cần tạo một file css và đặt tên (Ví dụ ie6.css). Trong file này chúng ta sẽ gán thuộc tính display: inline cho thành phần nào cần fix, ví dụ: .box, .box1, .box2{ display: inline}
Sử dụng đoạn mã sau để gọi file css trên nếu trình duyệt là IE 6:
<!--[if lte IE 7]> <link href="ie6.css" type="text/css" rel="stylesheet" /> <![endif]-->
2, Sử dụng CSS Absolute position
Không phải lúc nào chúng ta cũng có thể áp dụng được cách trên, và có thể gây ra một số lỗi khác.
Chúng ta hoàn toàn có thể sử dụng CSS Absolute position (Định vị tuyệt đối) để thay thế cho float, mình có đề cập đến thuộc tính này trên Ewebvn, bạn có thể xem lại bài viết này. .box{ position: absolute; left:50px; padding: 10px; background: green}
Với đoạn mã trên thì thành phần div.box sẽ được hiện thị như nhau trên tất cả các trình duyệt kể cả IE 6 mà không phải xử lý bất kỳ vấn đề nào về margin.
2, Sử dụng CSS Absolute position
Không phải lúc nào chúng ta cũng có thể áp dụng được cách trên, và có thể gây ra một số lỗi khác.
Chúng ta hoàn toàn có thể sử dụng CSS Absolute position (Định vị tuyệt đối) để thay thế cho float, mình có đề cập đến thuộc tính này trên Ewebvn, bạn có thể xem lại bài viết này. .box{ position: absolute; left:50px; padding: 10px; background: green}
Với đoạn mã trên thì thành phần div.box sẽ được hiện thị như nhau trên tất cả các trình duyệt kể cả IE 6 mà không phải xử lý bất kỳ vấn đề nào về margin.
3, Sử dụng plugin IE 6 Double Margin Jquery Fix
Phương pháp thứ 3 là bạn có thể sử dụng Jquery và Plugin IE 6 Double Margin Jquery Fix để khắc phục vấn đề này:
Download Plugin:
IE 6 Double Margin Jquery Fix (595 bytes, 141 Lượt tải)Để sử dụng thì bạn cần có Jquery, mình sử dụng Jquery có trên thư viện Goolge
Thêm đoạn mã sau vào phần <head> của trang web:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <!--[if lte IE 7]>
<script type="text/javascript" src="double-ie-fix.js"></script>
<![endif]-->
Bổ sung 10/12/2012
Cách này cũng khá hay và đơn giản, và tôi thường xuyên áp dụng nó trong các thiết kế của mình, hôm nay trả lời comment của một bạn về vấn đề có liên quan đến lỗi này và update luôn cho mọi người. Đó là sử dụng Margin trái chiều:
Ví dụ bạn có 2 cột (.col1 và .col2) đều gán float: left
Bây giờ bạn muốn .col2 cách .col1 một khoảng 10px.
- Nếu bạn sử dụng .col2{margin-left: 10px} thì 100% nó sẽ không hiển thị đúng trên IE
- Do đó bạn nên gán margin-right: 10px cho .col1{margin-right: 10px} để tránh được lỗi Double margin và không phải áp dụng các thủ thuật khác
Kết luận:
Bên trên là 3 cách để bạn có thể khắc phục vấn đề Double margin trong IE 6, bạn có thể chọn cho mình cách nào dễ sử dụng và phù hợp với mục đích của mình.
Mình hy vọng bài viết này giúp ích ít nhiều được cho bạn
<script type="text/javascript" src="double-ie-fix.js"></script>
<![endif]-->
Bổ sung 10/12/2012
Cách này cũng khá hay và đơn giản, và tôi thường xuyên áp dụng nó trong các thiết kế của mình, hôm nay trả lời comment của một bạn về vấn đề có liên quan đến lỗi này và update luôn cho mọi người. Đó là sử dụng Margin trái chiều:
Ví dụ bạn có 2 cột (.col1 và .col2) đều gán float: left
Bây giờ bạn muốn .col2 cách .col1 một khoảng 10px.
- Nếu bạn sử dụng .col2{margin-left: 10px} thì 100% nó sẽ không hiển thị đúng trên IE
- Do đó bạn nên gán margin-right: 10px cho .col1{margin-right: 10px} để tránh được lỗi Double margin và không phải áp dụng các thủ thuật khác
Kết luận:
Bên trên là 3 cách để bạn có thể khắc phục vấn đề Double margin trong IE 6, bạn có thể chọn cho mình cách nào dễ sử dụng và phù hợp với mục đích của mình.
Mình hy vọng bài viết này giúp ích ít nhiều được cho bạn
Thanks for sharing such useful information regrading Double margin to fix IE 6 this will definitely help me out in my new development.
Trả lờiXóaiphone development company