最稳妥的HTML样式写法是用标签内嵌CSS或class/id配合外部CSS文件；内联样式仅适用于调试或动态场景，因优先级高、难维护、不可复用。
HTML 样式代码怎么写才靠谱
直接在 <style></style> 里写 CSS 或用 class/id 配合外部 CSS 文件是最稳妥的写法。内联样式（style="..."）只适合临时调试或极少数动态控制场景，因为优先级高、难维护、无法复用。
关键不是“怎么写”，而是“怎么写才能跨浏览器一致”。比如：
-
box-sizing: border-box必须全局设好，否则 IE 和旧 Chrome 对width的理解完全不同 - 避免只用
display: flex而不加display: -webkit-flex（Safari 9- iOS 8.4 需要） -
rem单位依赖根字体大小，但 iOS Safari 在横屏切换时可能不重算，得用 JS 监听orientationchange补救
不同浏览器渲染差异的常见表现
不是所有“看起来不一样”都叫“兼容问题”。真正要警惕的是这些现象：
- Chrome 显示正常，Firefox 里
input[type="number"]右侧增减箭头错位或消失 - Safari 中
position: sticky完全失效（iOS 15.4 之前需加-webkit-sticky） - IE11 把
grid-template-areas当成无效声明，整块布局塌陷 - Edge Legacy（非 Chromium 版）把
transform: scale(0.9)应用在父元素上时，子元素文字模糊不可读
用什么工具/配置能少踩坑
靠人眼对比浏览器截图是下策。实际项目中应该：
Knowledge Graph - Csv Graph Loader Generator
下载
从 CSV 数据集生成图数据库加载器和三元组映射。将表格 CSV 数据转换为图数据库可直接使用的节点、边和三元组。
立即学习“前端免费学习笔记（深入）”；
- 用
postcss+autoprefixer自动补全前缀，目标浏览器写成"supports": ["> 1%", "last 2 versions", "ie >= 11"] - 在
reset.css或normalize.css基础上覆盖，别自己从零写* { margin: 0; padding: 0 }—— 这会让button和input在 Firefox 里失去默认间距 - 对关键组件（如日期选择器、模态框）在
caniuse.com查清支持情况，比如:focus-visible在 Safari 15.4+ 才稳定可用 - 本地测试至少覆盖 Chrome、Firefox、Safari（macOS）、Edge（Chromium）、iOS Safari（真机或 Xcode 模拟器）
哪些 CSS 属性最容易出兼容性问题
有些属性看似简单，实则暗坑密集：
-
aspect-ratio：Chrome 88+、Firefox 89+、Safari 15.4+ 支持，但 Safari 15.0–15.3 下会忽略整个声明块（不是降级，是静默失效） -
gap在 Flex 布局中：Firefox 63+ 支持，但 IE 和旧 Edge 完全不认；用在 Grid 中更稳，但得确认父容器是display: grid -
scroll-behavior: smooth：Safari 直到 15.4 才支持，且只对scrollIntoView()生效，CSS 伪类如:target触发的跳转仍生硬 -
backdrop-filter：iOS Safari 9+ 支持，但开启后若父容器有transform，会导致毛玻璃效果消失（需加transform: translateZ(0)强制硬件加速）
最麻烦的往往不是语法不支持，而是同一语法在不同引擎里触发了不同的渲染路径——比如 will-change: transform 在某些 Android WebView 中反而让动画卡顿。这类问题没法靠查文档预判，只能靠真实设备验证。
