/* ============================================================ ie9-fix.css —— IE9 降级兼容（ 生效，IE10 亦归入此类） IE9/10 不支持：flexbox、CSS Grid、gap、无前缀 gradient(IE9)、CSS 变量、 transition/transform/animation(IE9 部分)。 本文件用 float/行内布局重排核心区域，并对渐变/动画做纯色或静态兜底， 保证老浏览器下信息完整可读、可下单。 ============================================================ */ /* ---------- 导航：flex 失效 → float 横向排布 ---------- */ html.ie-legacy .nav-list { display: block; height: 62px; } html.ie-legacy .nav-list > li { float: left; display: block; height: 62px; } html.ie-legacy .nav-list > li > a { display: block; height: 45px; line-height: 45px; border-radius: 8px 8px 0 0; background: #0EA5E9; } html.ie-legacy .nav-list > li.abc { float: left; margin: 7px 0 0 8px; } html.ie-legacy .nav-list > li > a:hover { background: #F97316; } html.ie-legacy .nav-list > li.on > a { background: #6D28D9; } /* ---------- 顶部搜索框：flex → float ---------- */ html.ie-legacy .search-box form { display: block; height: 42px; } html.ie-legacy .search-box input[type=text] { float: left; width: 416px; height: 38px; box-sizing: border-box; } html.ie-legacy .search-box button { float: right; width: 96px; height: 38px; } /* ---------- 产品列表页：侧栏 + 主区 float 化 ---------- */ html.ie-legacy .pl-wrap { overflow: hidden; } html.ie-legacy .pl-wrap > .pl-side { float: left; width: 250px; } html.ie-legacy .pl-wrap > .pl-main { float: right; width: 930px; } /* 产品卡片：flex 布局失效 → float 流式 */ html.ie-legacy .pl-grid { overflow: hidden; padding: 10px 0; } html.ie-legacy .pl-card { float: left; display: block; width: 290px; margin: 6px; } html.ie-legacy .pl-card .pc-cart { display: block; } html.ie-legacy .pl-card .pc-qty { display: inline-block; } html.ie-legacy .pl-card .pc-qty input { width: 40px; } /* 卡片图片：object-fit 失效 → line-height 垂直居中 + 等比缩放 */ html.ie-legacy .pl-card .pc-img { display: block; height: 250px; line-height: 246px; text-align: center; font-size: 0; } html.ie-legacy .pl-card .pc-img img { display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; width: auto; height: auto; } html.ie-legacy .pl-card .pc-desc { height: 36px; overflow: hidden; } /* ---------- 详情页：图 + 信息 float 化 ---------- */ html.ie-legacy .dt-head { overflow: hidden; } html.ie-legacy .dt-head > .dt-img { float: left; width: 320px; height: 320px; display: block; line-height: 318px; text-align: center; font-size: 0; } html.ie-legacy .dt-head > .dt-img img { display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; width: auto; height: auto; } html.ie-legacy .dt-head > .dt-info { float: right; width: 830px; } html.ie-legacy .dt-buy { overflow: hidden; } html.ie-legacy .dt-buy .qty-input { display: inline-block; } html.ie-legacy .dt-buy .btn-lg, html.ie-legacy .dt-buy a.btn-lg { display: inline-block; margin: 0 0 0 10px; } html.ie-legacy .dt-tabs .tab-head span { display: inline-block; } /* 详情 tab 头渐变底线兜底 */ html.ie-legacy .dt-tabs .tab-head { border-bottom-color: #3B82F6; } /* ---------- 首页 ---------- */ /* 公告条：动画不支持 → 静态显示 */ html.ie-legacy .announce-text { padding-left: 0; } /* 27 大类块缩略图行 flex → float */ html.ie-legacy .hm-cpd-imgs { overflow: hidden; padding: 8px 6px; } html.ie-legacy .hm-cpd-imgs a { float: left; width: 25%; box-sizing: border-box; padding: 0 3px; } html.ie-legacy .hm-cpd-imgs a:first-child { padding-left: 0; } html.ie-legacy .hm-cpd-imgs a:last-child { padding-right: 0; } html.ie-legacy .hm-cpd-imgs img { width: 100%; height: 96px; box-sizing: border-box; } /* 宣传横幅 flex → float */ html.ie-legacy .hm-strip { display: block; overflow: hidden; } html.ie-legacy .hm-strip .hs-text { float: left; width: 58%; padding-top: 14px; } html.ie-legacy .hm-strip .hs-btn { float: right; margin-top: 34px; } /* 板块标题条 flex → float */ html.ie-legacy .hm-sec-bar { overflow: hidden; } html.ie-legacy .hm-sec-title { float: left; line-height: 40px; } html.ie-legacy .hm-sec-more { float: right; line-height: 40px; } /* 热卖标题条 */ html.ie-legacy .hm-hot-bar { overflow: hidden; } html.ie-legacy .hm-hot-title { float: left; line-height: 36px; } html.ie-legacy .hm-hot-links { display: block; overflow: hidden; padding: 0 10px; } /* 联系页联系我们卡片 */ html.ie-legacy .hm-ac-bar { border-bottom-color: #3B82F6; } /* 品牌块：内部 flex 失效 → 文本居中 */ html.ie-legacy .hm-brand-item { display: block; text-align: center; } html.ie-legacy .hm-brand-item .en, html.ie-legacy .hm-brand-item .cn { display: block; } html.ie-legacy .hm-brand-item:hover { background: #3B82F6; } /* ---------- 会员中心 ---------- */ html.ie-legacy .member-head { overflow: hidden; padding-bottom: 22px; } html.ie-legacy .member-head .avatar { float: left; } html.ie-legacy .member-head > div:nth-child(2) { margin-left: 90px; } html.ie-legacy .member-head > div:last-child { float: right; margin-top: -44px; } html.ie-legacy .member-stats { overflow: hidden; } html.ie-legacy .member-stats .ms-item { float: left; width: 31.5%; margin-right: 2%; box-sizing: border-box; } html.ie-legacy .member-stats .ms-item:last-child { margin-right: 0; } /* ---------- 登录 / 注册 ---------- */ html.ie-legacy .auth-wrap { text-align: center; } html.ie-legacy .auth-box { display: inline-block; text-align: left; } html.ie-legacy .auth-tabs { overflow: hidden; } html.ie-legacy .auth-tabs span { float: left; width: 33.333%; box-sizing: border-box; } html.ie-legacy .auth-tabs span.on { background: #3B82F6; } html.ie-legacy .auth-body .field .inline { overflow: hidden; } html.ie-legacy .auth-body .field .inline input { float: left; width: 72%; } html.ie-legacy .auth-body .field .inline .btn-sms { float: right; width: 26%; height: 40px; } /* ---------- 购物车 ---------- */ html.ie-legacy .cart-bar { overflow: hidden; } html.ie-legacy .cart-bar .cart-actions { float: left; } html.ie-legacy .cart-bar .cart-actions a { display: inline-block; margin: 6px 10px 0 0; } html.ie-legacy .cart-bar .cart-total { float: right; } html.ie-legacy .cart-bar .cart-total .btn-lg { display: inline-block; margin-left: 12px; vertical-align: middle; } html.ie-legacy .cart-table .ct-prod .ct-desc { max-height: 40px; overflow: hidden; } html.ie-legacy .cart-table .ct-prod .ct-img img { width: 80px; height: 80px; } /* ---------- 页脚 ---------- */ html.ie-legacy .footer-links { overflow: hidden; } html.ie-legacy .footer-col { float: left; width: 25%; box-sizing: border-box; padding-right: 16px; } html.ie-legacy .footer-bottom { clear: both; } /* ---------- 通用 flex 行降级 ---------- */ html.ie-legacy .section-head { overflow: hidden; } html.ie-legacy .section-head h3 { float: left; line-height: 30px; } html.ie-legacy .section-head .more { float: right; line-height: 30px; } html.ie-legacy .section-head { border-bottom-color: #3B82F6; } html.ie-legacy .section-head h3 { border-left-color: #F59E0B; } html.ie-legacy .news-list li { overflow: hidden; } html.ie-legacy .news-list li a { float: left; width: 82%; } html.ie-legacy .news-list li .date { float: right; } html.ie-legacy .float-item { display: block; text-align: center; } html.ie-legacy .float-item .fi-icon { display: block; line-height: 30px; } html.ie-legacy .float-item .fi-text { display: block; line-height: 16px; } /* 联系页 2 列卡片 grid → float */ html.ie-legacy .contact-grid { overflow: hidden; } html.ie-legacy .contact-grid > .contact-item { float: left; width: 48.5%; margin: 0 1.5% 16px 0; box-sizing: border-box; } html.ie-legacy .contact-grid > .contact-item:nth-child(even) { margin-right: 0; } /* 备用卡片网格（pd-grid/brand-wall 等未启用组件） */ html.ie-legacy .pd-grid { overflow: hidden; } html.ie-legacy .pd-grid > .pd-card { float: left; width: 24%; margin: 0 0.5% 16px; box-sizing: border-box; } html.ie-legacy .brand-wall { overflow: hidden; } html.ie-legacy .brand-wall > .brand-item { float: left; width: 12.4%; margin: 0 0.1% 12px; box-sizing: border-box; } /* ---------- 渐变纯色兜底（白字场景必须，否则不可读） ---------- */ /* 详情页参数块：flex/gap 失效 → inline-block 流式 */ html.ie-legacy .dt-opt-chips { display: block; font-size: 0; } html.ie-legacy .opt-chip { display: inline-block; margin: 0 8px 8px 0; } html.ie-legacy .opt-chip.on { background: #3B82F6; } html.ie-legacy .dt-opt-meta { overflow: hidden; } html.ie-legacy .dt-opt-price { float: left; } html.ie-legacy .dt-opt-range { float: left; margin-left: 14px; line-height: 20px; } html.ie-legacy .announce-bar { background: #0EA5E9; } html.ie-legacy .search-box button, html.ie-legacy .cart-entry { background: #3B82F6; } html.ie-legacy .cart-badge { background: #F59E0B; } html.ie-legacy .hm-latest-banner, html.ie-legacy .pl-side-link a, html.ie-legacy .pl-main-head, html.ie-legacy .pl-title, html.ie-legacy .pager .cur, html.ie-legacy .btn-lg { background: #2563EB; } html.ie-legacy .btn-lg.blue { background: #F97316; } html.ie-legacy .btn-cart-sm { background: #3B82F6; } html.ie-legacy .hm-strip { background: #2563EB; } html.ie-legacy .footer { background: #1E3A8A; } html.ie-legacy .member-head { background: #2563EB; } html.ie-legacy .member-head .avatar { background: #F59E0B; } html.ie-legacy .hm-cpd-subs { background: #2563EB; } html.ie-legacy .hm-cpa-re { background: #F97316; } html.ie-legacy .hm-cpd-head { border-bottom-color: #3B82F6; } html.ie-legacy .hm-hot-bar { border-bottom-color: #F97316; } html.ie-legacy .hm-sec-bar { border-bottom-color: #3B82F6; } html.ie-legacy .hm-brands-title { border-bottom-color: #3B82F6; } html.ie-legacy .dt-tabs .tab-head span.on { background: #3B82F6; } html.ie-legacy .btn-outline:hover { background: #3B82F6; } html.ie-legacy .btn-sms:hover { background: #EEF4FF; } /* ---------- IE10 专属补充（legacy 下 IE10 支持部分高级特性，避免过度降级） ---------- */ /* 渐变 IE10 其实支持无前缀，但在 legacy 文件内一律 solid，观感统一即可，不特殊处理 */