{}

Tạp chí tiếng Việt dành cho Web Designers.
Thứ Năm ngày 4 Tháng 12 năm 2008
Fix min-height cho IE

Hiện tại hầu hết các trình duyệt như Firefox, Opera, Safari,... đều hiểu được thuộc tính min-height: trong CSS, nhưng IE lại không thể hiểu được thuộc tính đó. Chính vì vậy mà khi chúng ta muốn đặt min-height cho một đối tượng nào đó thì chúng ta cần phải Fix để sao cho IE hiển thị được giống như những trình duyệt khác.

Giả sử rằng chúng ta có một thẻ <div class="box"> chúng ta muốn đặt min-height cho thẻ <div> này. Khi đó chúng phải làm như sau:

/* Cho tất cả các trình duyệt */
.box {
  width:20em;
  padding:0.5em;
  border:1px solid #000;
  min-height:8em; 
  height:auto;
}

/* Fix cho IE */
/*\*/
* html .box {
  height: 8em;
}
/**/

Update

Chúng ta cũng có thể dùng giải pháp như sau:

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Do IE6 không hiểu được thuộc tính min-height do đó chúng ta phải cố định chiều cao cho nó. Trong trường hợp nội dung có chiều cao lớn hơn height thì chiều cao trong IE6 sẽ tự động kéo dài xuống còn trong Firefox và một số trình duyệt khác sẽ sử dụng thuộc tính height: auto;.

CSSYeah.com
 

Vài nét về tác giả

Chu Huu Trung Chào tất cả các bạn, tên tôi là Chu Hữu Trung. Thiết kế Web là nghề của tôi, hiện nay tôi đang sống và làm việc tại Hà Nội (Việt Nam). Tôi rất vui khi các bạn ghé thăm cssyeah.com

Free icons

Free icons Với những bộ icon này bạn sẽ làm cho các dự án của bạn thêm sinh động hơn.