/* 浏览器兼容性修复 - 针对Edge浏览器兼容性问题 */ /* 1. Flexbox 兼容性修复 */ .flex-fix { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } /* 2. 计算属性兼容性修复 */ .width-calc-fix { width: -webkit-calc(100% - 200px); width: -moz-calc(100% - 200px); width: calc(100% - 200px); } /* 3. 滚动条样式修复 */ .tab-content { /* Edge滚动条样式修复 */ scrollbar-width: thin; scrollbar-color: #c1c1c1 #f0f0f0; } .tab-content::-webkit-scrollbar { width: 8px; } .tab-content::-webkit-scrollbar-track { background: #f0f0f0; } .tab-content::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; } .tab-content::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* 4. 表单元素兼容性修复 */ .form-control { /* Edge表单元素样式修复 */ -webkit-appearance: none; -moz-appearance: none; appearance: none; background-clip: padding-box; } /* 5. 按钮兼容性修复 */ .btn { /* Edge按钮样式修复 */ -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid transparent; } /* 6. 表格兼容性修复 */ .table { /* Edge表格边框修复 */ border-collapse: collapse; border-spacing: 0; } .table th, .table td { /* Edge表格单元格边框修复 */ border: 1px solid #dee2e6; } /* 7. 模态框兼容性修复 */ .modal { /* Edge模态框显示修复 */ -webkit-overflow-scrolling: touch; } .modal-content { /* Edge模态框阴影修复 */ -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5); box-shadow: 0 5px 15px rgba(0,0,0,.5); } /* 8. 字体图标兼容性修复 */ .fa { /* Edge字体图标显示修复 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 9. 输入框placeholder兼容性 */ .form-control::-webkit-input-placeholder { color: #6c757d; } .form-control::-moz-placeholder { color: #6c757d; } .form-control:-ms-input-placeholder { color: #6c757d; } .form-control::-ms-input-placeholder { color: #6c757d; } .form-control::placeholder { color: #6c757d; } /* 10. 动画兼容性修复 */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { -webkit-animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out; } /* 11. 响应式图片兼容性 */ img { max-width: 100%; height: auto; display: block; } /* 12. 清除浮动兼容性 */ .clearfix:after { content: ""; display: table; clear: both; } .clearfix { *zoom: 1; /* IE6/7兼容性 */ } /* 13. 文本选择兼容性 */ ::selection { background: #1ABC9C; color: white; } ::-moz-selection { background: #1ABC9C; color: white; } /* 14. 输入框焦点样式兼容性 */ .form-control:focus { outline: none; border-color: #1ABC9C; -webkit-box-shadow: 0 0 0 0.2rem rgba(26, 188, 156, 0.25); box-shadow: 0 0 0 0.2rem rgba(26, 188, 156, 0.25); } /* 15. 按钮悬停效果兼容性 */ .btn:hover { -webkit-transform: translateY(-1px); transform: translateY(-1px); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }