4 白茶SyraTi

尚未进行身份认证

小前端,有空就倒腾点别的 Vue/NW.js/Node/Express/MongoDB React/ReactNative/Cordova/Electron

等级
TA的排名 12w+

关于CSS选择器书写正确浏览器却不认的一个原因

不想看原因的,可以直接跳到页尾看解决方案今天在写样式的时候出现不生效的问题,选择器是正确的,使用jquery也能正常选择到,但是浏览器就是不识别这一段样式。问题样式 ↓jQuery能选择到 ↓然而Chrome的开发者工具里面根本没有出现这一行 ↓排查到最后尝试删除了选择器末尾的空格,发现居然神奇的被识别了。。。。删除末尾空格 ↓识别成功 ↓问题是解决了,但是奇了怪...

2020-03-26 11:05:37

获取元素到页面顶部的距离

const offsetTop = targetElement.getBoundingClientRect().top + document.body.scrollTop

2020-03-12 17:13:29

IOS/Mac/Safari无法播放MP4文件流及Http1.1 Range分段请求相关

故事背景公司项目需要将多媒体文件迁移至阿里OSS,原本直接从后端静态文件的<img> <video> 等标签都要改成从OSS获取展示。于是乎拦截了所有静态链接,调用了OSS接口获取了文件流返回到前台进行展示,简单粗暴,但是也遇到了问题 —— ios的 <video> 标签全军覆没。由于项目里视频比较少,这问题还是在上线前三天发现的,那个急的,一开始还找不到...

2019-12-26 01:31:53

关于Group By 单个和多个字段

在MYSQL中使用GROUP BY对表中的数据进行分组时:单个字段: GROUP BY X意思是将所有具有相同X字段值的记录放到一个分组里,多个字段: GROUP BY X, Y意思是将所有具有相同X字段值和Y字段值的记录放到一个分组里。参考文章:MYSQL GROUP BY 对多个字段进行分组 - Acettest’s Blogs - CSDN博客...

2019-10-31 15:54:46

css椭圆轨迹运动动画

朋友问我一个球沿着斜的椭圆轨迹运动怎么实现 实现之后随手记录demo地址

2019-07-02 11:19:36

拒绝假空心!纯css实现 真·空心带边框直角三角形和空心带边框直角梯形!

需求↑需要实现一个背景为半透明且带边框的直角梯形百谷解决方案碰到问题,程序猿的优良传统,先百谷一下(?) 得到的解决方案总结一下有这些:1.利用border交界处为斜边来制作,即border-top:none;border-right:transparent→问题:使用border来做背景,没法在border上再做边框,只能得到一个半透明的直角梯形2.利用矩形和三角形拼接→问题:...

2019-06-07 23:17:06

前端代码规范

HTML语法用四个空格来代替制表符(tab) – IDE可设置一个Tab四个空格嵌套元素应当缩进一次(即四个空格)。对于属性的定义,确保全部使用双引号,绝不要使用单引号。不要在自闭合(self-closing)元素的尾部添加斜线 。不要省略可选的结束标签(closing tag)(例如, 或 )。HTML5 doctype为每个 HTML 页面的第一行添加标准模式(stand...

2019-03-25 11:04:29

一根网线同时搭载电信itv及网络 解决方案

需求想把无线路由器放到客厅 但是客厅只有一个网口连接到弱电箱光猫的itv口 用来看电视 现在需要在该网口同时搭载网络和itv原拓扑图如下解决方案材料:1、水星Mercury SG105Pro 五口千兆网管交换机 价格 98 元 放置在客厅(下称SW5)2、水星Mercury SG108Pro 八口千兆网管交换机 价格 169 元 放置在弱电箱(下称SW8)解决思路:利用802.1...

2019-02-10 23:43:58

Chrome DevTool 行号错位问题

随手记录原因:当你在一个js里面写document.write(’<script>多行内容xxxx</script>’)后页面上的script断点调试会错位表现就是断点打在某一行 实际停在上面几行相差的行数取决于你写进文档的多行内容的行数...

2018-12-20 10:43:16

微信浏览器中iframe srcdoc、src="data:text/html,xxxx" 等无法使用情况下防止样式污染的解决方案

业务需求从后端取HTML 前端展示要求HTML不得被前台全局样式污染解决方案1、使用iframe 的 srcdoc <iframe srcdoc="<p>这是HTML<p&amp

2018-11-07 16:07:46

iframe在ios中高度自扩展问题 解决方案

开发需求在页面中加入一个定高的iframe问题IOS safari中iframe会根据内容高度进行iframe的内容自扩展以适应内容高度 设置height无效百谷之后在 iOS Safari 上,对于一个 scrollable 的 iframe 元素,iOS Safari 会选择扩展 iframe 的高度来自适应其中 web 页面内容的高度。所以当页面内容超过 iframe 设置的高度...

2018-10-11 14:52:31

new Obj() 与 Object.create(Obj.prototype)的区别

先看 Object.create 和new 的区别以下引用自blueblueskyhua的博客 创建对象的方式,我以我碰到的两种创建方式,Object.create 和new来说明var Base = function () {}var o1 = new Base()var o2 = Object.create(Base) 那这样到底有什么不一样呢? 这...

2018-06-07 13:03:42

webstorm中 emmet 模板的修改步骤

之前用atom、sublime的时候 Emmet 的模板是可配置的 但是在webstorm配置中的Editor > Emmet选项下没有发现任何有关模板的配置 只有一些选项的配置其实模板配置在Editor>Live Templates 下 会找到有Zen字样开头的 Zen CSS、 Zen HTML、Zen XSL 分别是CSS、HTML、XSL的模板 *E...

2018-03-27 14:14:09

ios中 input[readonly] 仍然可聚焦出现光标并弹出“完成”面板问题

除readonly外 还需要添加unselectable="on" onfocus="this.blur()"

2018-02-05 17:47:24

关于百度地图 DrivingRoute moreResultsUrl为“未能找到相应结果,请您:返回上一步操作..” 以及 WalkingRoute moreResultsUrl为空 的解决方案

—— 因为百度地图极速版貌似正在关闭并且停止维护了 文档页面和介绍页面都跳转到了正式版的API,然而极速版中非常好用的 routeSearch.routeCall 没了 于是乎开始找代替方案A Few Minutes Later…..经过一番Demo和文档的查找,惊喜的发现正式版中TransitRoute,WalkingRoute,以及DrivingRoute 的searchCompl...

2017-12-07 16:27:37

window.location.replace和window.location.href区别

有3个页面 a,b,c如果当前页面是c页面,并且c页面是这样跳转过来的:a->b->c1: b->c 是通过window.location.replace(“..xx/c”) 此时b页面的url会被c页面代替,并且点击后退按钮时会回退到a页面(最开始的页面) 2: b->c是通过window.location.href(“..xx/c”) 此时b页面的路径会被c页面代替,但是点击回按钮后页

2017-12-07 15:09:52

html垂直自适应布局

项目中遇到如下需求<body> <!-- top 盒子内容为内部撑开 --> <div class="top"> <!-- 未知高度的一些元素 --> </div> <!-- 目标盒子 需要自动填满屏幕剩余高度--> <div

2017-12-02 10:11:28

Jquery的each里用return true或false代替break或continue

在each代码块内不能使用break和continue,要实现break和continue的功能的话,要使用return true/false$(DOM).each(function(index,el){ return false; //break return true; //continue }

2017-11-30 10:10:52

关于For循环中进行异步操作索引不正确的处理方式

code 问题代码function test() { for (var i = 0; i < 5; ++i) { setTimeout(function() { console.log("index is :", i); }, 1000); }}test();output 问题输出index is : 5index is

2017-11-28 10:14:18

使用canvas实现图片压缩

那,首先通过URL.createObjectURL(file)从file对象直接取得了图片的地址前面就不详细说了,开始压缩咯 ( ´ ▽ ` )ノ噢,有个注意点:每次调用createObjectURL的时候,一个新的URL对象就被创建了,即使是同一个file对象,也会创建一个新对URL对象,所以,为了最佳性能和内存使用,当不再需要这个对象的时候要URL.revokeObjectURL()释放它。开始

2017-11-09 10:10:05

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 学习力
    学习力
    《原力计划【第二季】》第一期主题勋章 ,第一期活动已经结束啦,小伙伴们可以去参加第二期打卡挑战活动获取更多勋章哦。