新增系统功能兼容edge

web/css/browser-fixes.css

@@ -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;
+}

web/css/style.css

@@ -170,10 +170,24 @@ header a{
 	line-height: 60px;
 	font-size: 20px;
 	z-index: 9;
+	/* Edge浏览器兼容性修复 */
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 20px;
+	box-sizing: border-box;
+}
+
+.top-bar ul {
+	margin: 0;
+	padding: 0;
+	display: flex;
+	align-items: center;
 }
 
 .top-bar li {
 	float: right;
+	list-style: none;
 }
 
 .top-bar a {
@@ -201,6 +215,7 @@ header a{
 	height: 100%;
 	padding-top: 60px;
 	overflow: hidden;
+	-webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
 }
 
 .tab-content section {

web/imgTab.html

@@ -11,6 +11,7 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
     <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="css/toastr.min.css" rel="stylesheet">
+    <link href="css/browser-fixes.css" rel="stylesheet">
     <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
     <script src="js/jquery.min.js"></script>
     <script src="js/toastr.min.js"></script>

web/index.html

@@ -12,6 +12,7 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
     <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="css/toastr.min.css" rel="stylesheet">
+    <link href="css/browser-fixes.css" rel="stylesheet">
     <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
 
     <script src="js/jquery.min.js"></script>

web/langTab.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="css/style.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
     <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/browser-fixes.css" rel="stylesheet">
     <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
     <script src="js/jquery.min.js"></script>
     <script src="js/bootstrap.min.js"></script>

web/userTab.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="css/style.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
     <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/browser-fixes.css" rel="stylesheet">
     <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
     <script src="js/jquery.min.js"></script>
     <script src="js/bootstrap.min.js"></script>

web/zosi_link_index.html

@@ -12,6 +12,7 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
     <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="css/toastr.min.css" rel="stylesheet">
+    <link href="css/browser-fixes.css" rel="stylesheet">
     <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
     <script src="js/jquery.min.js"></script>
     <script src="js/toastr.min.js"></script>