IE7/IE8 兼容 CSS3 圓角按鈕的解決方案：使用 ie-css3.htc 行為文件

問題背景

項目需在 IE7 環境下運行，CSS3 border-radius 圓角按鈕在 IE7/IE8 中降級為方形，影響 UI 一致性。

解決方案

引入 ie-css3.htc 行為文件，通過 IE 私有 behavior 屬性模擬 CSS3 圓角、陰影、漸變等效果。

使用步驟

1. 下載 ie-css3.htc（GitHub 等開源庫均有）。
2. 放置於項目可訪問路徑（如 /css/ie-css3.htc）。
3. 在 CSS 中為需圓角的元素添加：

.rounded-btn {
    border-radius: 10px;
    behavior: url(/css/ie-css3.htc); /* IE 專用 */
}

注意事項

• behavior 路徑相當於 HTML 頁面路徑，建議使用絕對路徑或相對站點根目錄路徑。
• HTC 文件需以 text/x-component MIME 類型服務，IIS 需配置對應映射。
• 性能影響：每個應用 behavior 的元素會實例化一個 HTC 組件，大量元素可能拖慢渲染。
• 不支持復雜嵌套、動態生成的元素需重新觸發。

替代方案

• 圖片切圖：最兼容，但維護成本高。
• PIE.htc：功能更全面的 CSS3 兼容庫。
• 優雅降級：IE7/8 顯示方形按鈕，現代瀏覽器圓角，通過 @supports 或條件註釋控制。