ASJLanguageSys/web/css/browser-fixes.css

/* 浏览器兼容性修复 - 针对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;
}