|
|
@@ -0,0 +1,158 @@
|
|
|
+/* 浏览器兼容性修复 - 针对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;
|
|
|
+}
|
zhuojiaxuan