![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
浏览器兼容问题
麦兜_冰夕
这个作者很懒,什么都没留下…
展开
-
浏览器记住验证码和密码,而非用户名和密码
【场景】注册页面form表单顺序:用户名、验证码、密码、确认密码【问题】点击提交表单后,浏览器右上角自动记住了验证码和密码,而非用户名和密码【期望结果】记住用户名和密码【问题分析】由于浏览器默认记录离input type="password"的上一个input type="text"为用户名,而验证码离密码最近,故导致以上问题【解决方案】1.交换验证码和密码输入框的位置,两者外面包一层容器,设置style="display: flex;flex-direction: olumn-reve原创 2021-12-28 16:25:26 · 1314 阅读 · 0 评论 -
浏览器保存密码后自动填充错位问题
问题描述在浏览器中进行登录操作时浏览器往往会问我们是否需要记住密码,当我们点击了记住密码后,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便。加了HTML5 中的新属性autocomplete="off" ,但是并没有产生效果。浏览器自动填充机制反复测试后发现浏览器自动填充机制是满足:页面里有一个type=password的input且这个input前面有一个type=text的input的时候就会进行自动填充。firefox和360浏览器的处理方式是:只要检测到页面里有满足填原创 2021-09-02 14:20:40 · 1881 阅读 · 3 评论 -
前端实现下载表格数据
1.html部分table id为“grid-log”,导出按钮id为“exportbtn”,表格数据为bootgrid插件渲染而成 <table id="grid-log" class="table table-condensed table-hover table-striped table-responsive" data-store-selection="true"> <thead> .原创 2020-07-28 17:41:06 · 1469 阅读 · 1 评论 -
去除火狐、ie浏览器默认a标签虚线框
a{ outline:none;}原创 2020-05-28 11:22:07 · 222 阅读 · 0 评论 -
elementui input 火狐禁止填充
浏览器这功能在登录的时候挺好用的,但是在注册和管理的时候就很难受了所以在普通的input上直接off就行了<input type="password" autoComplete="off"/>而在elementui上使用autoComplete="off"是没用的 得使用new-password<el-input v-model="form.password" ...原创 2020-03-16 18:41:08 · 410 阅读 · 0 评论 -
使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别
注:HTML5不再支持使用frame,iframe只有src 属性(可设置width\height等属性及标准属性,依旧生效)一、使用iframe的优缺点优点:1.程序调入静态页面比较方便;2.页面和程序分离;缺点:1.iframe有不好之处:样式/脚本需要额外链入,会增加请求。另外用js防盗链只防得了小偷,防不了大盗。2.iframe好在能够把原先的网页全部原封不动显示下来,但是如...原创 2019-03-05 10:16:29 · 2079 阅读 · 0 评论 -
js判断浏览器
/判断火狐、谷歌、IE浏览器function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 if (userAgent.indexOf("Firefox") > -1) { return "FF"; } //判断是否Firefox浏览器 if (...原创 2018-09-04 17:40:28 · 167 阅读 · 0 评论 -
浏览器拦截跨域请求问题(火狐显示:已拦截跨域请求;谷歌显示请求报错:error/Network Error)
火狐与谷歌最简单的解决方法:在浏览器中打开请求的url,添加例外。除此之外,可分别设置如下:请求已经发送,页面的请求接口无误的情况下,火狐浏览器显示如下时:火狐浏览器提示已拦截跨域请求,解决发放如下:1.在火狐浏览器地址栏输入 about:preferences#privacy2.证书 -> 查看证书 -> 添加例外 -> 输入要添加的url -> 获取...原创 2018-09-04 16:50:04 · 54359 阅读 · 0 评论 -
vue+axios+webpack构建的项目打包后IE11中数据更新后页面没有刷新问题
【问题描述】页面进行删除数据操作后,重新获取列表,实际操作成功,ie11中列表不刷新,删除的数据依旧在【问题分析】F12打开IE11的控制面板,查看请求‘已接收’后的数据来源,显示“来自缓存”,如下图,ie浏览器会对相同请求的ajax,进行缓存,当你删除数据后,在调用同样的接口,ie不会刷新,只会把第一次请求该接口的数据缓存拿出来,所以页面数据依旧在,视图不更新【解决办法】给请求加上时...原创 2018-08-28 16:57:55 · 1184 阅读 · 0 评论 -
ES5、ES6的浏览器兼容性
从https://www.caniuse.com上面可以查询到,ES的兼容性概览。下面就主要浏览器进行说明:IE:可以看到IE6,IE7是完全不支持的。而IE8是只支持一些内容,参考引用4,IE9是大部分支持,支持度参考引用2。Chrome:Chrome 23版本之后就是完全支持的了。19~22版本有不兼容的地方,参考引用1。Firefox:Firefox 21版本之后就是完全支持的...原创 2019-03-05 10:54:51 · 24508 阅读 · 0 评论 -
如何在网页中用上自己下载的字体
在开发过程中市场会遇到需要特殊的字体,所谓的特俗字体就是常用字体库中不包含的字体。这时候,我们可以从网络上下载到我们需要的字体,然后引用到我们需要的网页中去。我们可以用CSS来引用字体路径。@font-face可以实现从服务器端加载字体,所有浏览器中使用的字体就可以不受本地字体的限制。@font-face真的不是什么新鲜玩意,早在2001年时就被提出来,只不过近两年才被各浏览器广泛支持。而...原创 2019-05-07 10:06:10 · 1225 阅读 · 0 评论 -
css解决浏览器输入框记住账号密码后的背景色
谷歌chrome浏览器在用户登录记住密码之后通常会改变input框的背景色,这是每一个程序猿不想看到的事情,下面提出解决这个问题的方法之一:↓ ↓ ↓css代码:input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #eded...原创 2019-05-22 18:34:30 · 724 阅读 · 0 评论 -
去掉Firefox输入框记忆
一,去掉Firefox输入框(input)记忆。Firefox输入框(input)有自动记忆功能,该功能会在表单提交后自动记忆输入框输入过的数据,当你再次在输入框中输入数据时,被记忆过的数据会在该输入框下自动给出提示。我们在实现补全提示功能时,Firefox输入框(input)的自动记忆提示信息会浮动在我们代码实现的补全提示框上,这样会遮挡住我们实现的补全提示信息。解决此问题就是会给...原创 2019-06-24 10:31:54 · 2873 阅读 · 0 评论 -
JQuery禁用浏览器前进、后退按钮
$(document).ready(function () { if (window.history && window.history.pushState) { $(window).on('popstate', function () { // 当点击浏览器的 后退和前进按钮 时才会被触发, window.history.pushState('forw...原创 2019-08-20 16:40:35 · 2511 阅读 · 0 评论 -
html读取input type=file文件内容
<input id="uploadInput" type="file" class="file_input" name="myFiles" onchange="UpdateOnChange(this);" multiple>上传文件function UpdateOnChange(that){ redFile(that,function(name,data){ var di...原创 2019-08-21 15:24:07 · 5755 阅读 · 0 评论 -
背景为图片的按钮css实现按钮背景图置灰
.l-btn-disabled { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: pr...原创 2019-08-23 15:24:28 · 1823 阅读 · 0 评论 -
IE11下websocket报SecurityError解决办法
问题描述:在chrome和firefox下是没有问题的,但是换成ie11之后,前6个websocket连接都成功了,但是从第7次之后全都失败了,new WebSocket返回异常SecurityError。报错如下:源码如下:问题分析:一般情况下,websocket连接只需创建一次,检查是否重复创建了websocket连接,若实在需要创建大于6的websocket连接,IE10...原创 2018-08-23 18:08:06 · 23779 阅读 · 0 评论 -
谷歌浏览器和火狐浏览器设置跨域和https、http混用
Chrome 添加启动项: 右键点击Chrome快捷方式,在目标一栏后添加启动项 允许跨域: --disable-web-security --user-data-dir 允许mix-content: --allow-running-insecure-content Fire Fox 进入选项配置地址栏输入about:confi...原创 2018-08-14 11:02:59 · 4839 阅读 · 0 评论 -
在HTML中嵌入Java Applet,Applet、Object和Embed的应用
<applet>是老的標籤,ie可以自動解析,不用下載jre,但是java里不能用到新的類,如swing <object>是新的標籤,需要下載jre,你可以提供下載軟件,這樣會比較快吧 至於不能運行問題,可能是沒有打包好所有該用到class,或者沒有安裝jre 如何部署 applet 取决于客户访问网页的方式以及使用的浏览器类型。注意这一点以后...转载 2018-07-04 09:45:56 · 3070 阅读 · 0 评论 -
判断浏览器,各浏览器页面高度自适应(平铺),各浏览器自适应去除滚动条,浏览器分辨率自适应
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src = "jquery-1.11.0.min.js"&原创 2017-11-13 15:22:47 · 1304 阅读 · 0 评论 -
PC端浏览器自适应(火狐、谷歌、IE11),媒体查询@media
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> body,html,*{原创 2017-11-15 18:01:25 · 5340 阅读 · 0 评论 -
改变select组件默认样式及option背景色
1.清除select组件原有样式-webkit-appearance: none; /* google */-moz-appearance: none; /* firefox */appearance: none; /* IE */2.设置新样式及option背景色background: #080F17 url(../../common/image/triangel.png)...原创 2018-04-04 14:04:53 · 50727 阅读 · 0 评论 -
ES6的数组解构赋值浏览器兼容问题
let [arr1,arr2,arr3] = [[1,2,3],["a","b","g","f"],[{"name":"John"},{"name":"Ally"}]];在IE 11 中会报错,IE 11不支持数组的解构赋值火狐、谷歌支持原创 2018-04-12 16:57:10 · 2801 阅读 · 0 评论 -
location.ancestorOrigins Firefox 和 IE 下的替代用法
window.location的ancestorOrigins属性原创 2018-04-12 17:50:53 · 2258 阅读 · 1 评论 -
鼠标滚轮事件兼容性及鼠标滚轮事件案例
鼠标滚轮事件在火狐、IE、谷歌浏览器的兼容性如下 chrome & IE: 滚轮事件:mousewheel 后滚: d3.event.wheelDelta = -120(或者120的整数倍) d3.event.detail = 0 前滚: d3.event.wheelDelta =...原创 2018-04-23 17:22:04 · 1218 阅读 · 0 评论 -
获取input type=file的文件名及input type=file获取文件名的浏览器,设置input type=file样式
获取input type=file的文件名方法:let filePath = $("input[type = 'file']").val(); //获取路径let urlArr = filePath.split("\\"); //以反斜杠'\'截取文件名为数组 let fileNam...原创 2018-04-23 18:57:43 · 10936 阅读 · 0 评论 -
@keyframes嵌套在@media中IE浏览器兼容问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>@keyframes嵌套在@media中IE浏览器兼容问题</title> <script src="./jquer原创 2018-04-20 14:28:18 · 3447 阅读 · 0 评论 -
opacity属性兼容问题
目前主流浏览器 Opera 9.0+,Safari 1.2(WebKit 125) +,chrome、firedox、IE11等等都支持opacity这个透明度属性。因此现在全兼容写法只需要兼顾IE6、IE7、IE8opacity{ opacity:0.5; filter:alpha(opacity=50); //filter 过滤器 兼容IE678}...原创 2018-05-02 15:17:41 · 3916 阅读 · 0 评论 -
event对象兼容性,获取事件委托对象
在IE中,event对象为window的属性,作用于全局作用域,而在Firefox中,event对象是最为事件的参数存在的。为兼容不同浏览器,采用如下写法:var btn = document.getElementById('btn'); btn.onclick = function(e){ var e = window.event || e; }对于event的部分属性,比...原创 2018-05-02 15:41:01 · 429 阅读 · 0 评论 -
冒泡与捕获,事件绑定,阻止事件冒泡,阻止默认行为
Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,Opera 7.0 及 Opera 更早版本也不支持。 但是,对于这些不支持该函数的浏览器,你可以使用 attachEvent() 方法来添加事件句柄。对于事件绑定兼容写法,如下:var x = document.getElementById("myBtn");if (x.addEventLi...原创 2018-05-02 16:17:15 · 234 阅读 · 0 评论 -
placeholder 颜色设置浏览器兼容性
/* WebKit browsers */input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; } /* Mozilla Firefox 4 to 18 */input:-moz-placeholder, textarea:-moz-placeholder { color: #66...原创 2018-05-09 15:55:57 · 3337 阅读 · 0 评论 -
Date.parse(date)和new Date(str)的兼容性问题
1.Date.parse(dateString) 方法可解析一个日期时间字符串,并返回 1970/1/1 午夜距离该日期时间的毫秒数。dateString必需。表示日期和时间的字符串其兼容性点击打开链接总结:考虑到兼容各大浏览器,需如下写:Date.parse(“2018/04/02”) 或者 Date.parse(“2018/4/2”) 得到2018年4月2号到1970/1/1的毫秒数2.new...原创 2018-04-27 18:06:31 · 3438 阅读 · 0 评论 -
JS中的伪协议,阻止a标签跳转几种方法的区别
A标签使用javascript:伪协议一、前言今天,遇到一个别人挖的坑,问题是这样的。做了一个列表页,可以筛选数据,有很多筛条件。主要是有input复选框和<a>标签两种。如图: 其中房价的筛选条件使用<a>标签,代码如下1 <a href="javascript:;" name="price">150元-300元</a> 用javascript:...原创 2018-05-08 09:44:50 · 1386 阅读 · 0 评论 -
Vue2.0做的项目在IE下面打开一片空白?
解释一:Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想...原创 2018-06-14 11:32:43 · 9336 阅读 · 5 评论 -
鼠标滚轮事件 mousewheel/DOMMouseScroll
1.Jquery-MouseWheel jquery默认是不支持支持鼠标滚轮事件(mousewheel) jquery MouseWheel下载:https://github.com/jquery/jquery-mousewheel/blob/master/jquery.mousewheel.js 然后就可以使用mousewheel和unmousewheel事件函数了 1 $('div.m...原创 2018-03-16 14:57:34 · 2327 阅读 · 0 评论