Menu không hiển thị trên IE8 - Khắc phục bằng CSS filter/opacity

Internet Explorer 8 không hỗ trợ thuộc tính opacity chuẩn CSS3. Nếu dùng opacity: 0.7 menu sẽ bị ẩn hoặc hiển thị sai. Cần dùng filter proprietary của Microsoft.

CSS Cross-browser cho Opacity (Hỗ trợ IE8)

.opacity-fix {
  /* IE 8 và cũ hơn */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  
  /* Modern browsers */
  opacity: 0.7;
}

Giải thích

Lưu ý quan trọng cho IE8

• -ms-filter phải đặt trước filter (thứ tự quan trọng).
• Giá trị trong -ms-filter phải bọc trong dấu ngoặc kép "...".
• Element phải có layout (hasLayout) để filter hoạt động: thêm zoom: 1 hoặc width/height cụ thể.
• filter trong IE làm ClearType font rendering bị tắt → chữ bị mỏng, răng cưa. Khắc phục: tránh dùng filter trên text, hoặc dùng background-image PNG semi-transparent thay thế.

Ví dụ menu dropdown IE8 fix

<style>
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ccc;
    /* Opacity cho animation fade-in */
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    transition: opacity 0.2s; /* IE9+ */
    zoom: 1; /* Trigger hasLayout cho IE filter */
  }
  .dropdown.open .dropdown-menu {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
  }
  
  /* IE8 hack: không hỗ trợ transition, dùng JS toggle class */
</style>

Khuyến nghị hiện đại

IE8 đã hết hỗ trợ (EOL 2016), thị phần ~0%. Chỉ hỗ trợ nếu:

• Hệ thống ngân hàng/chính phủ legacy bắt buộc.
• Dùng conditional comment load CSS riêng cho IE8:

<!--[if IE 8]>
  <link rel="stylesheet" href="ie8-fixes.css">
<![endif]-->