3 cách khắc phục lỗi Double margin IE 6

Gia đình miền Tây huyện Thới Bình hơn 20 năm chăm sóc hàng nghìn chim trời

Tập tành Working With Domain Access Module in Drupal 7.x

Posted by: Khanh Hoang
Wed, 20/02/2013, 8:51 (GMT+7)
0 Bình luận

3 cách khắc phục lỗi Double margin IE 6

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.

3 cách khắc phục lỗi Double margin IE 6

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.

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

Để 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/2011

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

File: