Bày tỏ IT

Nếu bạn đã bao giờ thực hiện (hoặc làm một) một Menu dọc bằng cách sử dụng các danh sách (li) thẻ và CSS, bạn có thể gặp phải, một lỗi trong Internet Explorer, trình duyệt IE 6 chèn các khoảng trống giữa các danh sách có chứa yếu tố cấp khối, tức là nếu có bất kỳ khoảng trắng giữa các mục trong danh sách đánh dấu. Cảm ơn, nhưng không nhờ, các phiên bản IE 7 có vẻ như miễn phí từ lỗi này.
Nếu như tôi, và nhiều hơn nữa, bạn thuộc về ban nhạc này của các nhà phát triển thất vọng, những người vẫn còn có để có được bố trí mới của họ, làm việc trong IE6, sau đó điều này có thể chứng minh hữu ích. Có một cái nhìn ...

Mẫu đánh dấu:

<ul id="menu">
<li> <a href="#"> Trang chủ </ a> </ li>
<li> <a href="#"> Giới thiệu </ a> </ li>
<li> <a href="#"> Dịch vụ </ a> </ li>
<li> <a href="#"> Danh mục đầu tư </ a> </ li>
<li> <a href="#"> Trợ giúp </ a> </ li>
<li> <a href="#"> Liên hệ </ a> </ li>
</ Ul>

Bạn có thể tạo ra một số CSS, tương tự như dưới đây, transfrom đánh dấu ở trên vào một menu dọc ....

Mẫu CSS ...
# Đơn {
margin: 0; padding: 0; background: # FF9900;
list-style-type: không có; width: 150px;
}
# Đơn li {margin: 0; padding: 0;}
# Menu {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; biên giới-bottom: 1px solid # FFF;
}

Kết quả bạn sẽ thấy ...

Giải pháp cho lỗi này ... (sửa đổi / bổ sung CSS nghiêng đậm)

# Đơn {
margin: 0; padding: 0; background: # FF9900; danh sách-style-type: none; width: 150px;
float: left; / * này có chứa các danh sách thả nổi * /
}
# Đơn li {
margin: 0; padding: 0;
float: left; / * Đây bản sửa lỗi * /
width: 100%; / * khoảng trắng lỗi trong IE6 * /
}
# Đơn {
màn hình hiển thị: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; biên giới-bottom: 1px solid # FFF;
}

Nếu doesnot giải pháp trên dường như làm việc (vì lý do được biết là IE6 chỉ) ... thử phương pháp này thay vì

Chỉ cần thêm này IE6 phong cách bổ sung duy nhất để đánh dấu của bạn ...

<- [If lt IE 7>
<style type="text/css">
# Đơn li a {display: inline-block;}
# Đơn li a {display: block;}
</ Style>
<[Endif] ->