28 Tháng 2Khắc phục lỗi double-margin trên IE6

Posted by admin

Đây là lỗi khi ta khi ta khai báo margin-left cho 1 element có float:left or margin-right cho 1 element có float:right thì trên các trình duyệt như IE7, FF , Safari, Chrome thì không sao nhưng trên IE6 lại có chuyện xảy ra là margin-left (margin-right) có giá trị gấp đôi giá trị ta khai báo ban đầu

Vd:

<style type=”text/css”>
.content{
float:left;
margin-left:50px;
background:#3399FF; }</style>
<div class=”content”>Nội dung ở đây</div>

Trên IE6 ta thấy box Content này cách lề trái trình duyệt những 100px.
Khắc phục

  • Gắn thêm thuộc tính:

Ta cho thêm thuộc tính display: inline;
<style type=”text/css”>
.content{
float:left;
margin-left:50px;
background:#3399FF;
display: inline;
} </style>
  • Star hack:

Tuy nhiên có nhiều lúc ta không thể dùng thuộc tính display:inline được , khi đó ta sẽ dùng đến cách này.

.content{
float:left;
margin-left:50px;
_margin-left:25px;
background:#3399FF;
margin-right:50px;
}

Cách làm này là ta khai báo giá trị còn phân nữa để gặp IE6 thì nó gấp đôi bằng với giá trị ta mong muốn. Nhược điểm của cách này là khi muốn margin-left là số lẻ thì không được

  • Chèn thêm một div:

Ở cách này có vẻ mất công nhất đó là ta tách thuộc tính float:left ra ngoài một div , div bên trong thì gồm có các thuộc tính còn lại.

.wrapper{float:left}
.content{
margin-left:50px;
background:#3399FF;
margin-right:50px;
}

Lúc này HTML sẽ trở thành
<div class=”wrapper”>
<div class=”content”>noi dung o day</div>
</div>

CSS

Gửi lời bình luận