safari 遇到的坑

最新推荐文章于 2025-03-23 14:15:41 发布
最新推荐文章于 2025-03-23 14:15:41 发布
阅读量1.1k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript css safari chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_21916259/article/details/90290764
项目中发现Safari和Chrome虽内核相同，但存在细微差别。记录了Safari浏览器的三个问题及解决办法，包括获取时间戳需将格式转换成YYYY/MM/DD；解决MP4视频上传和播放问题；处理::before、::after伪类元素设置不可用的情况。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

虽然Safari和chrome的内核都是 webkit 内核，但是两个浏览器还是有一些细微的差别，这次项目中遇到了一些，就在这里记录一下，避免下次再遇见。后面再遇见新的问题，会继续更新。


一、获取时间戳的问题

Safari浏览器下获取时间戳
解决： 必须将时间格式转换成 YYYY/MM/DD 才能获取到，否则会得到 Invalid Date


二、关于MP4的问题

Safari浏览器下不能播放MP4的视频

解决：使用element-ui 默认的上传组件并且设置accept="video/*"之后，会自动将.mp4后缀的视频设置为不可选（不能上传mp4），所以设置为accept="video/*, .mp4"，这样就可以正常上传.mp4视频

<el-upload class="iworku-upload-video video"
       :action="GLOBAL.qiniuURL"
       accept="video/*, .mp4" 
       :before-upload="onBeforeUpload"
       :on-success="onSuccessUpload"
       :on-error="onErrorUpload"
       :data="uploadData"
       :show-file-list="false">
</el-upload>
<!-- 这样才能在Safari浏览器中上传.mp4 后缀的视频 -->



三、::before、::after 里面设置cursor: pointer; 不可用

如标题所见，在 ::before、::after 伪类元素里面设置 cursor:pointer，在Safari浏览器是是不会出现 在这里插入图片描述， 而是使用默认箭头图标在这里插入图片描述

解决：在该元素的非伪类元素下设置cursor:pointer;

// css 代码
.chat {
	cursor: pointer;   // 正确代码
}

.chat::before {
	content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    background: url("~assets/images/public/chat.png") no-repeat;
    cursor: pointer; // 这句代码在Safari浏览器下不起任何作用
}

<!--  html 代码 -->
<i class="chat">显示聊天图标</i>
使用Safari或者Chrome远程调试IOS Safari中的页面
后端老鸟
08-15 2804
【转载请注明出处】：https://blog.youkuaiyun.com/huahao1989/article/details/107967581 1 使用Safari浏览器调试 1.1 打开Mac的 Safari 浏览器的“开发”菜单 运行 Safari 浏览器，然后依次选取“Safari 浏览器”>“偏好设置”，点按“高级”面板，然后勾选“在菜单栏中显示开发菜单”。 1.2 开启IPhone的Safari调试模式 启用 Web 检查 功能，打开 iPhone 依次进入 设置 > Safari浏览器
盘点h5在iOS下的那些坑
萌芽萌芽子
11-11 522
盘点h5在iOS下的那些坑 太忙咯好久没写博客啦！给大家分享一下关于萌芽在实战h5开发中关于iOS(Safari浏览器)的一些坑！希望帮助那些还没遇到过的萌新～ 在安卓下实现显示正常但是在iOS下时间格式为 NAN-NAN-NAN 关于Safari浏览器下cookie无法存储问题 在安卓显示正常但是在ios浏览器中字体超级小问题 1.时间格式错误 这个问题萌芽第一次遇...
JavaScript new Date()在Safari上的坑
John的专栏
12-13 747
问题描述 我们经常用yyyy-MM-dd HH:mm:ss格式表示日期，如2018-11-11 00:00:00，在js开发中也经常会把此格式字符串格式化为javascript Date类型，如new Date('2018-11-11 00:00:00')，不幸的是此操作在Safari浏览器（不论是Mac还是iPhone）上会报错，返回Invalid Date。如下图所示 在Mac S...
safari中遇到的坑
changhong009的专栏
07-13 665
最近在做移动Web的时候，在PC上用Chrome调试都成功了，但是在iPhone上真机一测就出现了奇怪的问题。经过一系列调试发现是日期相关的地方出现了问题。起初怀疑是生产环境的问题，但用Mac版的safari调试本地也出现了同样的问题。查阅一些资料后发现，safari中对于JavaScript的new Date函数的支持有一个比较奇怪的问题。 通常，由于习惯了SQL中的datetime格式，
17位时间戳转换为Unix时间戳及转换工具，代码实现转换 WebKit/Chrome Timestamp Converter
weixin_54430656的博客
04-17 5411
文章目录前言/目的：关于17位时间戳转换 WebKit/Chrome Timestamp的介绍便捷的转换工具用代码实现转换Python版本JavaScript版本 前言/目的： 在浏览微软Edge，谷歌Google，火狐Firefox等浏览器本地数据库文件的时候，发现里面的数据库表的关于时间的字段，其值都是用一种17位的时间戳表示的（即WebKit/Chrome Timestamp ），而不是常见的Unix时间戳，所有这里记录一下怎会在这些时间戳以及常见时间格式之间转换 关于17位时间戳转换 We
js关于safari浏览器日期转时间戳的问题
fan7983377的博客
09-14 1217
参考：https://blog.youkuaiyun.com/u013184759/article/details/51984080 使用js进行日期字符串转时间戳时，使用的是这种写法： let dateStr = "2021-01-01 12:13:14"; let time = new Date(dateStr).getTime(); 这种写法在window上chrome一切正常，可以正常转换，但是在safari浏览器上出现了time为空的情况，最后参考这篇文章解决了，主要是把日期中间的 “ - ” 改为 “
JavaScript的new date等日期函数在safari中遇到的坑
01-19
起初怀疑是生产环境的问题，但用Mac版的safari调试本地也出现了同样的问题。查阅一些资料后发现，safari中对于JavaScript的new Date函数的支持有一个比较奇怪的问题。 通常，由于习惯了SQL中的datetime格式，日期是...
基于js粘贴事件paste简单解析以及遇到的坑
12-12
【基于js粘贴事件paste简单解析以及遇到的坑】 在JavaScript中，`paste`事件允许开发者在用户执行粘贴操作时捕获并处理剪贴板的内容。本文将深入探讨如何在Chrome浏览器中利用此事件，并解决与Safari浏览器兼容性的...
safari游览器问题集合
少吃点肉的博客
10-12 304
记录safari游览器中的坑： 一：fixed定位的父元素如果有overflow属性，会被遮住！！！
:before 和 :after 的内幕
weixin_30664615的博客
05-08 161
伪类 VS 伪元素 这两个概念很容易混淆，即使你Google或者查W3C的资料都不一定搞得清。答案其实很简单，如下： 伪类：作用对象是整个元素 首先，来看几个伪类 a:link {color: #111} a:hover {color: #222} div:first-child {color: #333} div:nth-child(3) {color: #444} ...
safari浏览器display:none;但是依然显示的处理办法
qq_15697653的博客
03-18 3230
需要看一下在切换为display:none前，display是否为contents，如果是的话，改为display: block;
Safari浏览器display: flex布局错乱，Chrome布局正确
weixin_43473561的博客
05-25 1600
Safari浏览器display: flex布局错乱，Chrome布局正确 display: flex; align-items: center; justify-content: end; chrome显示结果 Safari显示结果 这个时候只需要把justify-content: end替换成 justify-content: flex-end就可以了 所以在开发当中，不管是justify-content还是align-items时都因该将start替换为flex-start ,end 替换为fl
el-upload手动上传及自动上传功能
weixin_45587805的博客
03-23 929
el-upload手动上传及自动上传功能
上传图片组件el-upload
weixin_47806588的博客
08-20 661
【代码】上传图片组件el-upload。
safari浏览器下jquery点击click无效解决方法
linjingyg的博客
12-17 870
　　 　　最近在一个网站建设公司客户的web前端外包的项目中，我们就碰到了这样一个问题， 苹果手机下safari浏览器下jquery点击click无效， 但是安卓或者pc上不存在这个问题。代码片段是没有问题的 　　//示例弹窗$(document).on('click','#exp',function(){ 　　$("#mask").fadeIn(); 　　$("#example").fadeIn(); 　　$(this).addClass("selected");}); 　　后来查阅很..
safri 对于display:block;的元素显示不出来 其他所有浏览器均正常
扬帆前行
01-11 2368
今天遇到一个比较坑的问题，就是别的浏览器打开页面都是正常的，唯独只有mac自带的safari浏览器不显示 ，我审查元素 发现这个块是存在的而且是display:block但是就是不存在，1.首先想到的是对于这个是不是mouseover和mouseout事件没执行，结果发现并不是，因为它的指向箭头是变化的，说明事件是执行的 2.我是用得固定定位 所以再次排查是否是固定定位引起的，结果显示也并不是，...
转换时间戳，兼容webkit和IE
weixin_30608131的博客
06-06 301
var date="2018-6-6"; var test=Date.parse(date.replace(/-/g,"/"));console.log(test) 　　 转载于:https://www.cnblogs.com/holy-amy/p/9145601.html
css after html,::after | CSS属性参考
weixin_32101377的博客
06-28 3669
CSS ::after伪元素用于在被选择的元素之后插入由content属性指定的内容。::after伪元素是一个虚拟元素，它默认是内联元素。它通常配合content属性来一起使用，content属性为该虚拟元素提供内容。例如，如果你想在一个超链接后面添加一个小图标 ，我们就可以通过::after伪元素来实现。这是一个超链接通过::after伪元素在后面插入了一个图标。.with_link_ico...
帮我写一个前端熟悉项目的日报
最新发布
06-15
<think>首先，用户的问题是：“我想获取前端项目日报的撰写方法或模板请问前端项目日报撰写指南或日报模板”。所以，我需要提供关于前端项目日报的撰写指南或模板。系统级指令：-所有行内数学表达式使用$...$格式。-独立公式使用$$...$$格式并单独成段。-LaTeX语法正确。-使用中文回答。-生成相关问题。-回答中引用的段落末尾自然地添加引用标识，例如[^1]。用户可见层：-回答结构清晰，帮助用户逐步解决问题。-尽量保证回答真实可靠。-参考站内引用：引用[1],[2],[3]。这些引用是关于日报/周报的指南，但用户需求是前端项目日报。我需要尽可能参考用户上一次的问题和我的回答，但在这个对话中，这是第一次交互，所以没有历史。从引用中：-引用[1]：关于日报/周报的核心价值、写作方法论等。-引用[2]：关于反馈。-引用[3]：一个日报示例。用户需求是前端项目日报，所以我应该基于引用[1]的核心内容来定制前端日报的指南。结构化回答：-回答应该结构清晰。我可以分步骤或分部分。-首先，介绍日报的重要性。-然后，提供方法论，如黄金结构（20%成果+30%问题+50%计划）。-最后，给出模板或示例。生成相关问题：在回答后添加相关问题部分，如示例中的“§§相关问题§§”。使用中文回答。内容大纲：1.**引言**：解释前端项目日报的重要性。2.**核心价值**：基于引用[1]，讨论日报的核心价值（项目透明化、个人能力证明、知识沉淀）。3.**写作方法论**：-黄金结构：20%成果+30%问题+50%计划。-应用到前端项目：例如，成果包括完成的页面、修复的bug；问题包括遇到的兼容性问题；计划包括下一步的开发任务。4.**前端日报模板**：提供一个具体的模板。-模板示例：-**今日成果**：列出完成的前端任务。-**遇到的问题**：描述遇到的挑战，如浏览器兼容性、性能问题。-**明日计划**：规划下一步工作。5.**进阶技巧**：基于引用[1]，如使用工具链推荐（Obsidian,Excel,PingCode）。6.**避坑指南**：常见问题解决方案，如避免过于笼统。7.**工具推荐**：提到一些工具。8.**相关问题**：生成相关问题。引用标识：在引用引用[1]的内容时，添加[^1]，类似地其他引用。由于用户需求是前端项目日报，我应该定制内容。例如：-成果：例如，实现了React组件、优化了CSS。-问题：如JavaScript错误、响应式设计问题。-计划：如开发新功能、测试。模板示例：-使用Markdown或文本格式展示。最终，添加相关问题。相关问题想法：1.如何量化前端开发成果？2.日报中如何有效描述技术问题？3.有哪些工具可以帮助自动生成前端日报？确保回答真实可靠：基于一般知识，参考提供的引用。</think>### 前端项目日报撰写指南 作为一名前端开发者，撰写高质量的日报不仅能提升个人效率，还能促进团队协作和项目透明化。基于日报的核心价值（项目透明化、个人能力证明、知识沉淀）[^1]，我将为你提供一套针对前端项目的日报撰写指南，包括方法论、模板和实用技巧。指南分为几个步骤，帮助你逐步构建清晰的日报内容。 #### 1. **日报的核心价值与适用性** - **项目透明化**：日报帮助团队了解前端开发进度，例如页面实现、Bug修复状态，避免信息孤岛。 - **个人能力证明**：记录你的贡献，如优化代码性能或解决兼容性问题，提升个人影响力。 - **知识沉淀**：日报可作为技术文档，积累前端最佳实践（如响应式设计或框架使用经验）[^1]。 - 在前端项目中，日报尤其重要，因为前端涉及用户界面、交互逻辑和跨浏览器兼容性，这些问题需要及时跟踪和反馈。 #### 2. **日报写作方法论：黄金结构** 引用[1]中提到的“黄金结构”（20%成果 + 30%问题 + 50%计划）非常适合前端项目。以下是具体应用： - **20% 成果**：聚焦已完成的可量化工作，例如： - 实现了一个React组件库。 - 修复了CSS布局在移动端的响应问题。 - 优化了页面加载速度（例如，减少$L = \frac{\text{资源大小}}{\text{加载时间}}$ 的指标）。 - **30% 问题**：描述遇到的挑战和解决方案思路，避免泛泛而谈： - 例如：“在Chrome浏览器下，JavaScript事件监听出现兼容性问题，尝试使用Polyfill但需进一步测试。” - 引用[2]强调，反馈应具体，包括技术细节（如错误代码或浏览器版本）。 - **50% 计划**：明确下一步行动，确保可执行： - 例如：“明日计划完成Vue路由模块开发，并测试跨设备兼容性。” - **黄金比例的优势**：这确保了日报简洁高效（约150-300字），避免冗长，同时覆盖关键点。 #### 3. **前端项目日报模板** 以下是一个通用模板，你可以根据项目需求调整（使用Markdown或文本格式）： ```markdown # 前端项目日报 - [日期] **项目名称**: [你的项目名称，例如“电商平台前端重构”] ## 今日成果 (20%) - 完成了首页响应式布局开发，支持移动端和桌面端。 - 修复了3个高优先级Bug，包括表单提交逻辑错误（涉及JavaScript事件处理）。 - 性能优化：减少了首屏加载时间至$T < 1\text{s}$，通过代码分割实现。 ## 遇到的问题 (30%) - 在Safari浏览器下，CSS Flexbox布局出现错位，已定位原因（需添加前缀兼容）。 - API接口返回数据格式不一致，导致前端渲染失败，正在与后端协调。 - 引用[2]建议：反馈时附上截图或代码片段，便于团队协作。 ## 明日计划 (50%) - 开发用户个人中心页面（使用React Hooks）。 - 测试跨浏览器兼容性（覆盖Chrome, Firefox, Safari）。 - 学习并应用Webpack优化策略，减少打包体积。 ## 知识沉淀 - 总结了Flexbox常见兼容问题，添加到团队Wiki。 ``` **模板说明**： - **结构灵活**：成果、问题、计划各占比例，确保重点突出。 - **前端定制**：强调技术细节（如框架、性能指标），避免通用描述。 - **可扩展性**：添加“知识沉淀”部分，记录学习心得，促进团队共享[^1]。 #### 4. **进阶技巧与避坑指南** - **进阶技巧**： - **量化指标**：使用工具（如Lighthouse）测量性能，并在日报中引用数据（例如：$ \text{性能得分} \geq 90 $）。 - **工具集成**：推荐使用Obsidian + 插件管理日报模板，或PingCode自动同步任务状态[^1][^3]。 - **反馈优化**：引用[2]提到，定期寻求反馈（如“日报内容是否清晰？”），提升质量。 - **避坑指南**（常见问题解决方案）： - **问题：日报过于笼统** 解决方案：具体化描述，例如不说“优化了代码”，而说“重构了React组件，减少渲染时间$ \Delta t = 200\text{ms} $”。 - **问题：忽略兼容性问题** 解决方案：在“问题”部分强制列出测试的浏览器和设备。 - **问题：计划不可执行** 解决方案：拆解任务，例如“明日计划”细分为子步骤（开发、测试、文档）。 #### 5. **工具链推荐** - **Obsidian + 插件**：用于创建可复用的日报模板，支持Markdown和LaTeX公式（如$ x^2 $ 渲染）[^1][^3]。 - **Excel智能模板**：管理任务进度，自动计算时间指标（例如$ \text{进度} = \frac{\text{完成任务}}{\text{总任务}} \times 100\% $）。 - **PingCode/Worktile**：集成前端项目管理，自动生成日报草稿[^1]。 - 免费工具：Whatting（引用[3]）提供自定义布局，适合快速记录。 #### 总结 撰写前端项目日报时，核心是聚焦技术细节和可行动项。使用黄金结构（20%成果 + 30%问题 + 50%计划）确保日报简洁有力。结合工具（如Obsidian）能提升效率。日报不仅是汇报，更是个人成长的催化剂——坚持记录，你会积累宝贵的前端经验[^1]。如果需要进一步定制模板，欢迎提供反馈！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值