教程详情
1. CSS Grid布局测试:在两者中使用`display: grid`创建3列布局,Chrome(版本112)和Safari(版本16.4)均正确渲染。但当子元素设置`grid-column: span 2`时,Safari在MacOS Ventura系统下出现1像素间隙,需添加`gap: 0`修复。
2. Flexbox对齐差异:对于垂直居中的弹性盒子(`align-items: center`),Chrome在Windows/Linux平台表现一致,而Safari在macOS上对齐基线偏移3px。使用`margin: auto`替代可统一效果。
3. JavaScript引擎特性:测试ES6箭头函数(如`() => {}`),两者均支持。但共享ArrayBuffer功能在Safari默认禁用,需手动开启“实验性功能”中的“SharedArrayBuffers”。
4. HTML5表单验证:输入字段input required在失焦时触发验证,Chrome显示红色边框并阻止提交,Safari则弹出系统级警告框。自定义验证消息样式在Safari中需通过`setCustomValidity`实现。
5. 媒体查询响应断点:针对iPhone 14 Pro(390x844分辨率),Safari严格匹配设备像素比(DPR=3),而Chrome允许通过`-webkit-min-device-pixel-ratio`模拟。横屏测试时,Safari的`orientation: landscape`触发阈值比Chrome早5度。
6. WebP图片支持对比:无损压缩的WebP格式在Chrome中可直接替换JPEG(通过picture标签),Safari仅支持有损压缩类型。测试1MB原始图片,Chrome加载时间缩短40%,Safari需降级为JPEG。