細水、長流√的专栏

然而我发现大家好像都默认浏览器不会对带 EXIF 信息的图片进行回正，当然之前确实不会。但是自从 iOS 更新到 13.4.1 后，浏览器支持自动回正了。在做手机移动端app时，发现iOS12.5.1版本（iphone6）上传照片出现顺时针旋转90问题，iphone11倒是正常，最后发现。2.在对应的vue模块引入：import EXIF from “exif-js”;利用exif.js读取照片的拍摄信息。

如果input框的type=“text” 或者 type=“password”，则可以给input框加上maxLength属性，让最大长度等于验证码的位数。某些app或者微信网页里，复制手机收到的短信验证码，会触发UITextFieldTextDidChangeNotification。type=‘text’ 或者 type='password’时候。事件，导致验证码出现了两次，这个应该是ios系统内部的bug.

正确处理下载文件时HTTP头的编码问题（Content-Disposition）最近在做项目时遇到了一个 case ：需要实现一个强制下载功能（即强制弹出下载对话框，阻止浏览器尝试解析显示某些文件格式），并且文件名必须保持和用户之前上传时相同（可能包含非 ASCII 字符）。前一个需求很容易实现：使用 HTTP Header 的Content-Disposition: attachment即可，还可以配合Content-Type: application/octet-stream来确保万无一...

一、问题产生项目中由于版本问题必须升级stomp.js。然而stomp.js包内部使用的TextEncoder和TextDecoder在IE下并不兼容。导致整个项目在IE下无法跑。兼容性查看入口.二、解决尝试text-encoding.js在npm上找到了兼容库 text-encoding.js,这是github链接地址,这是npm链接地址。然而很不幸的是，这两个都已经停止维护，公司也无法将其作为开源软件引入，故放弃。当然，对于大家要求没那么严格来说，完全可以使用。自己写一个text-.

只需要在文件中引入以下代码就可以使用了(function(){//解决classList的兼容问题(ie9及以下) if (!("classList" in document.documentElement)) { Object.defineProperty(Element.prototype, 'classList', { get: function() { var s...

html<div class="layout_flex">        <!-- 头部 -->        <div class="header">header</div>        <!-- 中间内容区域 -->        <div class="content" id=

微信页面开发时，各个主页之间的跳转，完全是通过a链接进行的，但是来回跳转几次，再次从其他主页面跳回首页的时候，微信头部出现了跳转加载进度条，但是就是不跳转，也没有任何反应，怎么回事呢？下面小编给大家解答下【问题】微信页面开发时，各个主页之间的跳转，完全是通过a链接进行的，但是来回跳转几次，再次从其他主页面跳回首页的时候，微信头部出现了跳转加载进度条，但是就是不跳转，

jQuery文档text()说由于不同浏览器中HTML解析器的差异，返回的文本可能在换行符和其他空白区域中有所不同。我会用$td.html()。var item = $('<span><font size=1> </font></span>').text()item == " "返回falsevar item = $("<sp.

解决 iOS 设备上链接要点击两次才跳转的问题昨天接到用户反馈，iOS 设备上链接要点击两次才跳转，这个问题怎么能忍的下去，解决办法如下： 确保你的HTML页面添加了以下头部代码：[html] view plain copy<meta name="viewport" content="width=device-width, initial-scale=1"/>  引入 jQuery 库...

iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效转载于：https://my.oschina.net/yjjjjjj/blog/993805

原文地址：gitub上的Flexbugs list，可以看到Flex布局在IE糟糕表现的详细描述。2. Column flex items set to align-items:center overflow their containerflex 容器如果设置竖排，并且垂直居中，flex子项目的文字会溢出容器。解决办法是给子项目设置一个 max-width:100%。Edge修复了这个b...

出现问题的原因：就是在input设置样式的时候不要使用line-height来实现垂直居中。解决的办法：要想实现文字的垂直居中，应该设置高度，然后再使用padding来进行填充。转载于：https://blog.youkuaiyun.com/web_callBack/article/details/78911039 ...

做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协，虽然这只是个别情况。今天，结合自己的经...

微信6.7.4 H5页面里的select,input软键盘弹起的时候页面会上移，软键盘关闭页面不会下移。导致页面空缺了一部分。 微信6.7.3及其它版本不会有这个问题！页面会随着软键盘关闭而下移恢复正常！微信打开网页键盘弹起后页面上滑，导致弹框里的按钮响应区域错位最新ios的微信6.7.4版本，在input收起键盘后，键盘区会有个遮挡区域。照上面的回答里 $...

罪魁祸首 i{ display inline-block width .08rem height .08rem background-color #D0021B border-radius 50% }画了个圆，在ios中效果很理想。但是在安卓手机中会有变形的情况存在，渲染方面确实安卓手机干不过ios（毕竟安卓版...

1. ios中，输入框获得焦点时，页面输入框被遮盖，定位的元素位置错乱：当页input存在于吸顶或者吸底元素中时，用户点击输入框，输入法弹出后，fiexd失效，页面中定位好的元素随屏幕滚动。针对这个问题，我们一起来看下以下几种方案：方案一： Web API 接口 ：scrollIntoView的应用，将input输入框显示在可视区域。1 // 输入框获得焦点时，元素移动到可...

标准参考在 HTML 4.01 规范中关于 onunload 事件的描述是：当 document 从 window 中移除时，触发 onunload 事件。关于 HTML 4.01 规范中 onunload 内在事件说明：http://www.w3.org/TR/html401/interact/scripts.html#adef-onunload 。MSDN 中关于 on

跨域的定义：Javascript出于安全性考虑，同源策略机制对跨域访问做了限制。域仅仅是通过“URL的首部”字符串进行识别，“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。实际上，同源策略就是浏览器的一种保护机制，只要请求双方的URL协议、

除IE外都可识别 所有的IE可识别 仅IE6可识别 IE6以及IE6以下版本可识别 IE6以及IE6以上版本可识别 仅IE7可识别 IE7以及IE7以下版本可识别 IE7以及IE7以上版本可识别 仅IE8可识别 仅IE9可识别 如: 或 .header-menu>li{ color:#fff; } ![en

现在的浏览器IE6-IE10、Firefox、Chrome、Opera、Safari。。。数量众多，可谓百家争鸣，对用户来说有了很多的可选择型，不过这可就苦了Web前端开发人员了。今天把一些常用的CSS Hack整理了一下，包括常用的IE hack以及火狐、Chrome、Opera浏览器的Hack，并把这些CSS Hack综合的一起，写了一个小的浏览器测试器。如图所示：下面就来看一下代

一、前面的唠叨CSS hack这个东东可以说是老掉牙的东西，我是不会再放到锅里炒的。之所以写这篇文章，更主要的是介绍一个CSS hack – “\9″ hack，总之，在我的印象中，这个hack不常用，是适用范围问题，还是确实大家不了解我就不知道了。我最早见到此hack是在新浪博客的CSS文件中，而且这个”\9″ hack可以说犹如泛滥，水漫金山寺般的使用，见下面的截图（chrome查

因为IE8浏览器这个坑，不支持css3的background-size:cover这个属性，当时有一个很大的图片需要做页面的背景，要适应不同分辨率的电脑，然后就遇到了这个问题IE8虽然不支持这个属性，但是有一个filter​这个属性个人认为是这样解释：微软Alpha图片加载器​filter:progid:DXImageTransform.Microsoft.AlphaIma

不同版本的 Internet Explorer 浏览器支持不同的 JavaScript 元素集。标准模式（有  指令时 Internet Explorer 所有当前版本中使用的模式）支持的一组元素与突发模式（没有  指令时使用的模式）不同。 有关版本控制的更多信息，请参见Defining Document Compatibility（定义文档兼容性）。　　下表显示支持特定语言元素的 I

平时在做动画的时候，如果涉及交互比较多一些的时候。比如像拆礼盒，摇筛子等基于微信的小游戏，transitionend和animationend这个两个事件都会用到，之前做微信的小游戏过程中，把两个事件在pc端和移动端的常用的浏览器给测试了一下并做了整理，虽然浏览器的支持结果大同小异，但是还是有一些细微的差别的，其中微信和qq浏览器（其实是同一个）对于两个事件都需要加前缀！一、transit

CSS选择器的浏览器支持下面是一系列关于最流行的浏览器对CSS选择器和伪选择器的支持情况的测试。该测试包括从过去美好的CSS1到当前时髦的CSS3最基本的东西。如果你想了解关于CSS的选择器的更多内容，W3C官方文档绝对是个好地方!如果你发现了任何错误(这个，大家都会发生的)或者有任何看法，请在前端观察联系我们。CSS 1↓ 选择器 / 浏览器 →

HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法：1.检测浏览器对FileReader的支持[javascript] view pla

JS框架：angular.js和react.js和Avalon.js和vue.js和backbone.js和Node.jsAngularJS(IE9)1.0(IE8)react.js (IE9)Avalon.js(IE6)vue.js   (IE9)backbone 需要另写js操作dom，开发较麻烦，但兼容性好(其他MVVM框架, KnockoutJS(IE6), Emb

今天遇到了一个问题，要在一个页面中设置一个半透明的白色div。这个貌似不是难题，只需要给这个div设置如下的属性即可：background: rgba(255,255,255,.1);但是要兼容到ie8。这个就有点蛋疼了。因为ie8不支持rgba()函数。下面我们总结一下rgba()函数的含义。rgba的含义，r代表red，g代表green，b代表blue，红绿蓝是三原色。所有

网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth   (包括边线的宽);网页可见区域高： document.body.offsetHeight  (包括边线的宽);网页正文全文宽： document.body.scroll

一些SVG向下兼容优雅降级技术这篇文章发布于 2013年09月22日，星期日，10:19，归类于 SVG相关。 阅读 71492 次, 今日 48 次by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=3678一、SVG前言再一次拿

DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    title>Documenttitle>    style>        img{border:none;display:block;width:120px;height:120px;}        .arrow{w

1234567::-webkit-scrollbar //滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。（位置1）::-webkit-scrollbar-button //滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景

测试中出现的问题，Safari5.1.7  input文本框有placeholder值时，css样式设置 line-heigh t与 heigh t等高，并不能使提示文本垂直居中，如下：[css] view plain copyheight: 40px;  line-height: 40px;  解决方案一：使用pad

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。本文详细介绍CORS的内部机制。（图片说明：摄于阿联酋艾因（Al Ain）的绿洲公园）一、简介CORS需要浏览器和服务器同时支持。目前，所

给chrome加上启动参数：?123--allow-file-access-from-files或者　--disable-web-security如，右击谷歌浏览器快捷图标-属性--快捷方式-目标?1