IE浏览器Bug总结

每每在网上搜索IE浏览器Bug时,总是骂声一片,特别是前端工程师,每天都要面对,IE浏览器特别是IE6,存在很多Bug,对Web标准的支持也拖后腿,但不可否认,IE浏览器是曾经的霸主,它的贡献也是巨大的,我们要以一种发展的眼光去看等,技术是不段地发展,面对陈旧浏览器出现的问题,我们,特别是前端工程师,要心平气和地面对,其它只要你了解它的特性,解决它也是如鱼得水,下面在网上找了一些IE常见Bug,比较全,与大家分享一下: “ Internet Explorer——前端攻城师的的恶梦,十个有九个前端…

常见IE浏览器bug及其修复方案(双外边距、3像素偏移、绝对定位)

1. 双外边距浮动bug IE6和更低版本中存在双外边距浮动bug,顾名思义,这个Windows bug使任何浮动元素上的外边距加倍 bug重现: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>双外边距bug</title> <style type="text/css"> * { margin: 0; padd…

IE浏览器bug罪魁祸首--hasLayout

IE浏览器一直都是前端程序员最头疼的,IE的表现与其他浏览器不同的原因之一就是,显示引擎使用一个称为布局(layout)的内部概念. 认识hasLayout--haslayout是Windows Internet Explorer渲染引擎的一个内部组成部分.在Internet Explorer中,使用布局概念来控制元素的尺寸和定位.在理想情况下,所有元素都控制自己的尺寸和定位.但是,这在IE中会导致很大的性能问题.因此,IE开发团队决定只将布局应用于实际需要它的那些元素,这样就可以充分地减少性能…

常见浏览器bug以及解决方法

1.图片下方3像素: (1).描述:在div中插入图片时,图片会将div下方撑大三像素. (2).hack1:将</div>与<img>写在一行上(可以解决ie6/7): (3).hack2:将<img>装换为块级元素,给<img>添加声明:display:block; (4).hack3:给<div>加overflow:hidden; 2.换行产生3像素: (1).hack1:不折行将元素放在一行内显示: (2).hack2:给元素加浮动; 3…

360急速浏览器BUG，POST表单提交参数丢失

p{text-indent:2em;} --> 今天我在做支付宝充值的时候发现在360急速浏览器下面业务处理页面获取Request.Form参数为空,一开始我还以为是自己参数没有传递过去.然后就开始了1小时的deBUG 下面是页面流程 A→B→C A:用户信息填写页面,位于游戏大厅中 B:业务处理页面,用于判断和生成订单 C:支付宝支付页面其他浏览器全部都没有问题,就是在360极速浏览器参数丢失了由于是在B页面获取参数为空,于是我就开始在B页面各种尝试获取参数的方法,结果就是无用功,任何方式…

MVC过滤器之添加LoginAttribute，浏览器bug：重定向次数太多

以前在写登录Action过滤时,都在每个Controller前写上CheckLoginAttribute:这次决定偷懒试一下能否将所有Action和Controller统一过滤: 出bug的代码是这样式儿的: 1.新建一个特性类,继承ActionFilterAttribute,在Action执行前判断是否有登录记录Session,则在OnActionExecuting(ActionExecutingContext filterContext)中判断未登录,则返回登录界面: public clas…

常见浏览器bug(针对IE6及更低版本)及其修复方法

常见bug及其修复方法有以下几种 1.双外边距浮动bug 双外边距浮动bug在IE6及更低版本中常见.所谓双外边距浮动bug是指使任何浮动元素上的外边距加倍.(见下图) 只要将元素的display属性设置成inline就行了.因为元素时浮动的,所以将display属性设置为inline实际上不会影响显示方式.但是,这似乎会阻止Windows上的IE6及更低版本将所有外边距加倍.所以每当对具有水平外边距的元素浮动时,都应该很自然的将display属性设置为inline,以备外边距将来被加大. 2.…

Flex 布局里 input 宽度最小 150px 的问题，浏览器 BUG?

今天在使用 flex 布局时, 发现当 flex 布局容器比小(小于 150px )时,里面的 input[text] 的宽度会比容器宽: <style> #main { width:120px; height:30px; border:1px solid black; display:flex; padding: 5px; } </style> <div id="main"> <input type="text" styl…

浏览器bug html 底部

…

margin和padding那点事及常见浏览器margin padding相关Bug

用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的margin,将得到20px的空白. 何时应当时用padding: 需要在border内测添加空白时. 空白处需要背景(色)时. 上下相连的两个盒子之间的空白,希望等于两者之和时.如15px + 20px的padding,将得到35px的空白. margin是用来隔开元素与元素的间距:padding…

IE浏览器兼容 css之bug 问题

bug的几种常见原因: 1.盒模型bug 原因:没有正确声明doctype(如果没有声明doctype,各浏览器对代码的解析有不同的规范).解决方法:使用严格的doctype声明. 2.各浏览器对不同标签的初始值不同(如字体.字体大小.li的边框和小黑点都不一样) 解决方法:利用css初始化. 3.自身书写不规范(如IE的3像素bug,一般是由于第一个div设置浮动,后面的div没有设置导致的)解决方法:书写规范,后面的元素一般要做清理浮动. 4.双倍margin 原因:浏览器…

浏览器顶部设置margin-top时存在的bug

浏览器bug<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; border: none; } .container{ width: 1200px;…

css属性兼容主流浏览器

目前,对于网页中一些浏览器兼容性问题,可以使用css hack(css 招数)和浏览器Bug修复的方式解决. 名词解释: css Hack:针对特定浏览器编写冗余代码,这是一种欺骗浏览器的行为,预示着有更好的解决办法. 浏览器bug修复:针对浏览器本身的bug,使用css自有的属性,进行浏览器显示问题的修复. 常见浏览器兼容性解决方案: 1.IE有条件注释代码示例: <!-- [ if IE8 ] > <style> @import " test.css";…

CSS 多浏览器兼容性问题及解决方案

兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 4.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字…

那些盒模型在IE6中的BUG们，工程狮的你可曾遇到过？

HTML5学堂那些盒模型在IE6中的BUG们,工程狮的你可曾遇到过? IE6已经渐渐的开始退出浏览器的历史舞台.虽然当年IE6作为微软的一款利器击败网景,但之后也因为版本的持续不更新而被火狐和谷歌三分天下.可谓成在IE6,亦败在IE6啊~ 说到前端开发,不得不说,在所有前端工程师的心中,IE6是曾经永远的痛~ 在这里,小编总结罗列了一下IE6的问题,跟大家分享一下.今天就先从盒模型入手啦~ 盒模型基本概念盒模型指css布局中html中的每个元素在浏览器中的解析都可以被看作一个盒子,拥有盒子一…

IE6 浏览器常见兼容问题大汇总（23个）

IE6以及各个浏览器常见兼容问题大汇总综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼容各个浏览器,依然是不得不面对的工作. 在此总结了常见的浏览器兼容问题,里面也有IE6的常见兼容问题,供大家分享. 如需转载,请注明出处:网易博客-独行冰海:IE6 浏览器常见兼容问题大汇总 1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的…

IE6的那些css常见bug（汇总）

IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了虽说很早之前就知道博客园这个地方但怕自己不能坚持去写一些东西一直没有建.这几天我做了这个决定把我的博客建起来每周发一些看到的,听到了一些前端知识或者前沿技术. 另外说一句,我是一个前端小白所以高手就忽略我吧免得说我班门弄斧我只是想写点或记录点东西可能还会帮助一些比我更加新的新手共同成长 ^_^! 好了,废话不说了,众所周知,IE6…………(对不起先让我恶心下....) 随着高级浏览器的风靡不仅是前端开发人员…

我的第一篇文章 —— IE6的那些css常见bug（汇总）

我的微博终于在前几天建立了虽说很早之前就知道博客园这个地方但怕自己不能坚持去写一些东西一直没有建.这几天我做了这个决定把我的博客建起来每周发一些看到的,听到了一些前端知识或者前沿技术. 另外说一句,我是一个前端小白所以高手就忽略我吧免得说我班门弄斧我只是想写点或记录点东西可能还会帮助一些比我更加新的新手共同成长 ^_^! 好了,废话不说了,众所周知,IE6…………(对不起先让我恶心下....) 随着高级浏览器的风靡不仅是前端开发人员就连他的父母“大微软”也恨不得他早点灭…

第一百一十二节，JavaScript浏览器检测

JavaScript浏览器检测学习要点: 1.navigator对象 2.客户端检测由于每个浏览器都具有自己独到的扩展,所以在开发阶段来判断浏览器是一个非常重要的步骤.虽然浏览器开发商在公共接口方面投入了很多精力,努力的去支持最常用的公共功能:但在现实中,浏览器之间的差异,以及不同浏览器的"怪癖"却是非常多的,因此客户端检测除了是一种补救措施,更是一种行之有效的开发策略. 一．navigator对象 navigator对象是window对象旗下的对象 navigator对象最早由N…

Chrome浏览器 54 版本显示“Adobe flash player已过期”问题解决

背景电脑上面的软件很久没升级,用腾讯电脑管家批量做了一次升级,结果Chrome浏览器升级到54版本flash控件没法用了. 第一时间想到直接到flash官网下载一个新的进行安装,结果官网检测显示,Chrome浏览器已自带flash控件,当前设置为禁用.what fuck? 马上由跑到了chrome浏览器的插件管理目录查看.chrome://plugins/,结果flash控件显示是启用中. 怀疑,chrome浏览器BUG给我埋坑了! 解决万事不行先看官网说明,先去Adobe官方网站看一下关于…

JavaScript(第十七天)【浏览器检测】

由于每个浏览器都具有自己独到的扩展,所以在开发阶段来判断浏览器是一个非常重要的步骤.虽然浏览器开发商在公共接口方面投入了很多精力,努力的去支持最常用的公共功能:但在现实中,浏览器之间的差异,以及不同浏览器的"怪癖"却是非常多的,因此客户端检测除了是一种补救措施,更是一种行之有效的开发策略. 一．navigator对象 navigator对象最早由Netscape Navigator2.0引入的navigator对象,现在已经成为识别客户端浏览器的事实标准.与之前的BOM对象一样,每…

浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及其他的细节问题.而除了defer和async特性,动态脚本和Ajax脚本注入也是两种常用的创建无阻塞脚本的方法.总的来看,这两种方法都能达到脚本加载不影响页面解析和渲染的作用,但是在不同的浏览器中,这两种技术所创建的脚本的执行时机还是有一定差异,今天我们再来探讨一下通过动态脚本技术和Ajax注入的脚本在这些方…

QQ浏览器兼容模式下Cookie失效导致的NetCore Cookie认证失效

最近在写NetCore项目采用的是NetCore的Cookie认证.结果偶然发现QQ浏览器登录不好用.这里先需要了解一下set-cookie中的SameSite属性导致原因首先Fiddler 4查看一下两次请求第一次Post进行登录返回302重定向到站点首页并带回Cookie (一切正常) 但是看第二条http请求,返回又是302 ,查看相关信息,请求时Cookie 根本没带入到此基本知道整个登录失败是因为Cookie没有带入请求头. 解决方案: NetCore Cookie认证下如…

IE6 浏览器常见兼容问题大汇总（23个）[转载]

IE6以及各个浏览器常见兼容问题大汇总综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼容各个浏览器,依然是不得不面对的工作. 在此总结了常见的浏览器兼容问题,里面也有IE6的常见兼容问题,供大家分享. 1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2…

IE6 浏览器常见兼容问题共23个

1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.不同浏览器当中,很多的标签的默认样式不同,如默认的外部丁内补丁. 产生条件:不同浏览器: 解决办法:利用CSS reset文件进行样式的清除,然后再根据需要进行设置. 3.横向双倍外边距产生条件:在IE6中块元素浮动后,会出现横向双倍margin现象. 解决办法: 在float标签的样式控制中加入display:inl…

jQuery源码学习感想

还记得去年(2015)九月份的时候,作为一个大四的学生去参加美团霸面,结果被美团技术总监教育了一番,那次问了我很多jQuery源码的知识点,以前虽然喜欢研究框架,但水平还不足够来研究jQuery源码,那时我不明白他们为何要求那么高,现在才知道,原来没那么高,他问的都是jQuery最基本的框架架构,不过对于不知道的来说,再简单我也是不知道,那时写了一篇博文去吐槽了一下,那时候也是我自己真正激发自己的时候,那时候我说我一定要搞好自己的jQuery基础,没想到那么快就实现了,一个月的源码学习时间就结束…

ASP.NET MVC 3 网站优化总结(一) 使用 Gzip 压缩

网站开启 Gzip 压缩的好处相信很多人都已经清楚,这样做可以提高网站的性能.那么为什么很多网站没有开启 Gzip 压缩功能呢?原因有4点:防病毒软件.浏览器 bug.网站代理和服务器未配置. 使用 IE6 时不会发送 Accept-Encoding 请求头,这样就不支持 Gzip 压缩功能了,所以这里号召大家使用 Google Chrome.在 ASP.NET MVC 3 中我们通过实现 ActionFilter 来实现,如下: public class CompressAttribute :…