/* ============================================================ ie11-fix.css —— IE11 兼容补丁（仅在 时生效） IE11 不支持：CSS 变量(已由 style-ie.css 展开解决)、 flex 子项 gap、CSS Grid、object-fit、aspect-ratio、border-image、-webkit-line-clamp。 本文件对这些特性做等价降级，视觉尽量贴近现代浏览器。 IE10 归类为 .ie-legacy（见 ie9-fix.css），不适用本文件。 ============================================================ */ /* ---------- flex 间距 gap 丢失：改用子项 margin ---------- */ /* 详情页头部：图 + 信息区 */ html.ie11 .dt-head > * + * { margin-left: 28px; } /* 详情页购买条：步进器 + 按钮 */ html.ie11 .dt-buy > * + * { margin-left: 14px; } /* 会员中心头部 */ html.ie11 .member-head > * + * { margin-left: 18px; } /* 会员统计卡（父容器负 margin 抵消，flex:1 项用左右 margin 做列距） */ html.ie11 .member-stats { margin-left: -7px; margin-right: -7px; } html.ie11 .member-stats .ms-item { margin: 0 7px; } /* 产品列表页：左侧树 + 右侧产品区 */ html.ie11 .pl-wrap > .pl-main { margin-left: 14px; } /* 首页「关于禾邦+联系我们」备用组件 */ html.ie11 .about-home > * + * { margin-left: 24px; } /* 首页 27 大类块内 4 张缩略图 */ html.ie11 .hm-cpd-imgs { margin-left: -5px; margin-right: -5px; } html.ie11 .hm-cpd-imgs a { margin: 0 0 0 5px; } html.ie11 .hm-cpd-imgs a:first-child { margin-left: 0; } /* 登录/注册：验证码行 */ html.ie11 .auth-body .field .inline > * + * { margin-left: 10px; } /* 详情页 tab 头间距（现代是 gap 6 + margin 6） */ html.ie11 .dt-tabs .tab-head span { margin-right: 12px; } /* ---------- CSS Grid 布局：改等义 flex + calc ---------- */ /* 联系我们 2 列卡片 */ html.ie11 .contact-grid { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; } html.ie11 .contact-grid > .contact-item { box-sizing: border-box; width: calc(50% - 16px); margin: 0 8px 16px; } /* 备用：最新产品网格 4 列（组件未启用，预留保证可用） */ html.ie11 .pd-grid { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; } html.ie11 .pd-grid > .pd-card { box-sizing: border-box; width: calc(25% - 16px); margin: 0 8px 16px; } html.ie11 .dt-related .pd-grid > .pd-card { width: calc(16.6667% - 16px); } /* 备用：品牌墙 8 列 */ html.ie11 .brand-wall { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -6px; margin-right: -6px; } html.ie11 .brand-wall > .brand-item { box-sizing: border-box; width: calc(12.5% - 12px); margin: 0 6px 12px; } @media (max-width: 992px) { html.ie11 .brand-wall > .brand-item { width: calc(25% - 12px); } } /* ---------- object-fit:contain 图片居中（列表卡片大图） ---------- */ html.ie11 .pl-card .pc-img { display: -ms-flexbox; display: flex; -ms-flex-align: center; -ms-flex-pack: center; align-items: center; justify-content: center; height: 250px; } html.ie11 .pl-card .pc-img img { width: auto; height: auto; max-width: 100%; max-height: 100%; -ms-flex: 0 0 auto; } /* ---------- 渐变底线 border-image 丢失：改纯色底线 ---------- */ html.ie11 .section-head { border-bottom-color: #3B82F6; } html.ie11 .section-head h3 { border-left-color: #F59E0B; } html.ie11 .dt-tabs .tab-head { border-bottom-color: #3B82F6; } html.ie11 .auth-tabs { border-bottom-color: #3B82F6; } html.ie11 .hm-ac-bar { border-bottom-color: #3B82F6; } html.ie11 .hm-sec-bar { border-bottom-color: #3B82F6; } html.ie11 .hm-cpd-head { border-bottom-color: #3B82F6; } html.ie11 .hm-hot-bar { border-bottom-color: #F97316; } html.ie11 .hm-brands-title { border-bottom-color: #3B82F6; } html.ie11 .nav .cat-dropdown { border-top-color: #3B82F6; } /* ---------- -webkit-line-clamp 多行省略丢失：定高截断兜底 ---------- */ html.ie11 .pl-card .pc-desc { height: 36px; overflow: hidden; } html.ie11 .cart-table .ct-prod .ct-desc { max-height: 40px; overflow: hidden; } /* ---------- IE11 flex 子项 min-width:auto 溢出防护（flexbugs） ---------- */ html.ie11 .search-box input[type=text] { -ms-flex: 1 1 0px; } html.ie11 .pl-side { -ms-flex: 0 0 250px; } html.ie11 .hm-cpd-imgs a { -ms-flex: 1 1 0px; } html.ie11 .auth-tabs span { -ms-flex: 1 1 0px; } /* ---------- 其它小修正 ---------- */ /* IE11 无 aspect-ratio：首页缩略图已等比缩放，容器 min-height 保证占位整齐 */ html.ie11 .hm-cpd-imgs img { min-height: 90px; } /* 渐变下划线在 section-head 下边框被 border-image 覆盖的选择器修正已在上方；阴影双层 rgba 正常 */