first commit
This commit is contained in:
闫旭隆
196
AIEC-server/css/safari-fix.css
Normal file
196
AIEC-server/css/safari-fix.css
Normal file
@ -0,0 +1,196 @@
|
||||
/* ===== Safari 和苹果系统字体渲染修复 ===== */
|
||||
|
||||
/* 检测 Safari 浏览器 */
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
/* Safari 特定修复 */
|
||||
|
||||
/* 修复对话输入框文本行距 */
|
||||
#messageInput,
|
||||
#chatModeMessageInput,
|
||||
textarea {
|
||||
/* 使用固定行高而非相对值 */
|
||||
line-height: 1.5 !important;
|
||||
/* 强制字体平滑 */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* 确保文本基线对齐 */
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* 修复聊天消息文本行距 */
|
||||
.message-content,
|
||||
.chat-message,
|
||||
.ai-message,
|
||||
.user-message {
|
||||
line-height: 1.6 !important;
|
||||
/* 使用像素值作为后备方案 */
|
||||
line-height: 24px !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 修复按钮和标签文本对齐 */
|
||||
button,
|
||||
label,
|
||||
.menu-item {
|
||||
line-height: normal !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 修复段落和列表行距 */
|
||||
p, li, div {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* 确保代码块正确显示 */
|
||||
pre, code {
|
||||
line-height: 1.4 !important;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* iOS 特定修复 */
|
||||
@supports (-webkit-overflow-scrolling: touch) {
|
||||
/* iOS Safari 特定样式 */
|
||||
|
||||
/* 修复输入框在 iOS 上的显示 */
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
/* 禁用 iOS 默认样式 */
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
/* 修复行高 */
|
||||
line-height: normal !important;
|
||||
/* 修复字体大小以防止缩放 */
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
/* 修复 iOS 上的滚动性能 */
|
||||
.chat-container,
|
||||
#chatContainer,
|
||||
#chatMessages {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 修复 iOS 上的点击延迟 */
|
||||
button,
|
||||
a,
|
||||
.clickable {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
}
|
||||
|
||||
/* macOS 特定修复 */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
/* macOS 桌面浏览器 */
|
||||
|
||||
/* 使用系统字体栈以获得最佳渲染 */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
|
||||
}
|
||||
|
||||
/* 修复 macOS 上的字体渲染 */
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* 代码字体优化 */
|
||||
code, pre, .monospace {
|
||||
font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 通用苹果设备修复 */
|
||||
@supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) {
|
||||
/* 修复文本选择 */
|
||||
::selection {
|
||||
background-color: rgba(0, 122, 255, 0.3);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* 修复输入框占位符 */
|
||||
::-webkit-input-placeholder {
|
||||
line-height: normal;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 修复滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 修复 flexbox 在 Safari 中的问题 */
|
||||
.flex,
|
||||
[class*="flex-"] {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
}
|
||||
|
||||
/* 修复 Safari 中的 100vh 问题 */
|
||||
.h-screen,
|
||||
[style*="height: 100vh"] {
|
||||
height: 100vh;
|
||||
height: -webkit-fill-available;
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
}
|
||||
|
||||
/* 特定元素的行距修复 - 已由font-optimization.css处理 */
|
||||
/* 保留特殊的padding设置 */
|
||||
#chatModeMessageInput {
|
||||
/* 确保垂直居中 */
|
||||
padding-top: 14px !important;
|
||||
padding-bottom: 14px !important;
|
||||
}
|
||||
|
||||
/* 聊天消息容器行距修复 */
|
||||
.message-bubble,
|
||||
.chat-bubble {
|
||||
line-height: 1.5 !important;
|
||||
word-spacing: normal;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
/* 修复中文字体渲染 */
|
||||
:lang(zh),
|
||||
:lang(zh-CN),
|
||||
:lang(zh-TW),
|
||||
:lang(zh-HK) {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif !important;
|
||||
line-height: 1.6 !important;
|
||||
}
|
||||
|
||||
/* 修复表情符号显示 */
|
||||
.emoji {
|
||||
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
/* 调试模式 - 可以临时启用查看行距 */
|
||||
/*
|
||||
* {
|
||||
outline: 1px solid rgba(255, 0, 0, 0.1);
|
||||
}
|
||||
*/
|
||||
Reference in New Issue
Block a user