IE6 min-height tiến thoái lưỡng nan

Question

Đây là trang web của tôi: http://smartpeopletalkfast.co.uk/ppp/home-page.html

Tôi muốn các hình thức đầu vào là cùng một chiều cao như các nút bên phải của họ. Tôi đã thực hiện điều này với giá trị chiều cao tối thiểu để trang vẫn có thể sử dụng được nếu kích thước văn bản được đặt lớn hơn chiều cao này.

Vấn đề là IE6 không nhận ra min-height. Tôi có thể đặt chiều cao cố định, nhưng tôi lo lắng về việc người dùng thay đổi kích thước văn bản vượt quá điều này. Vì nó chỉ là một vấn đề mỹ phẩm, tôi bị cám dỗ chỉ để rời khỏi đây.

Mọi đề xuất? Cảm ơn

Answer 1

Nếu vấn đề thực sự là chỉ nhận được min-height làm việc trong IE6, sử dụng Min-Height Fast Hack:

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

Nó được khoảng một thời gian dài, vì vậy nó dễ nhận biết cho ai duy trì CSS của bạn trong tương lai.

Answer 2

Cảm ơn bài đăng của bạn. Ive thấy rằng giải pháp xung quanh nhưng nó didnt làm việc cho tôi, nó thiết lập một chiều cao cố định không phải là một tối thiểu.

Tôi đã thực hiện nó bằng giải pháp dưới đây và tải CSS cho IE6 chỉ để có biện pháp tốt. Nó hoạt động trên các máy tính ive thử nghiệm nó trên, tôi chỉ hy vọng nó hoạt động cho tất cả các máy tính IE6:

http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/

Cảm ơn

Answer 3

Cho phép tôi đưa ra một cách tiếp cận khác nhau. Đây là mục tiêu của bạn, như đã nêu:

Tôi muốn các biểu mẫu nhập có cùng chiều cao như các nút ở bên phải.

Thêm vào đó, có một điều kiện của việc cho phép thay đổi kích thước văn bản, như đã nêu:

vẫn có thể sử dụng nếu kích thước văn bản là thiết lập để lớn hơn chiều cao này

Biết rằng , đề xuất của tôi là căn cứ chiều cao trên EM. Sử dụng EMs để xác định chiều cao vùng chứa của đầu vào và nút, sau đó đặt chiều cao của đầu vào và nút là 100%. Bằng cách này, khi người dùng đặt lại kích thước phông chữ của họ (từ nhỏ nhất đến lớn nhất), vùng chứa sẽ tăng và thu nhỏ và đầu vào/nút sẽ tăng và thu nhỏ với chúng.

Tôi đã chế nhạo lên một ví dụ đơn giản ở url sau: http://jsbin.com/oguze5/2/edit

Mọi thứ sẽ cần phải được thay đổi cho mục đích phong cách, nhưng ý tưởng/khái niệm chung là âm thanh khá.

Answer 4

Trong Internet Explorer 6, height được coi là min-height và min-height không được hỗ trợ.

Vì vậy, bạn có thể viết quy tắc chỉ nhắm mục tiêu IE6 để sửa lỗi này.Giả sử bạn có các thông tin sau:

#navigation .nav-menu-item { 
    min-height:50px; 
} 

Để có hiệu ứng tương tự trong IE6, bạn có thể thêm quy tắc thứ hai mà chỉ IE6 mới nhận ra. Tôi có xu hướng sử dụng the star HTML hack:

#navigation .nav-menu-item { 
    min-height:50px; 
} 
* html #navigation .nav-menu-item { /* for IE6 */ 
    height:50px; 
} 

Bạn có thể đọc thêm here.