接触了一个PC端网页开发的项目,要求兼容到IE 8,遇到不少坑,在这里记录下: 1.IE8 的兼容性视图 bug描述:IE8有许多新更新,但微软为了兼容以前的IE浏览器,提出了"兼容性视图"的概念,它可以使用低版本IE(6.7)内核,显然这并不是我们想要的,所以需要使用meta标签来强制IE8使用最新的内核渲染页面 bug解决: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1&…

html常见兼容性问题? 1.双边距BUG float引起的  使用display 2.3像素问题 使用float引起的 使用dislpay:inline -3px 3.超链接hover 点击后失效  使用正确的书写顺序 link visited hover active 4.IE z-index问题 给父级添加position:relative 5.Png 透明 使用js代码 改 6.Min-height 最小高度 !Important 解决’ 7.select 在ie6下遮盖 使用ifram…

css 兼容问题一直是困扰前端开发人员的大难题,提到兼容性立马想到了万恶的ie6,说多了都是泪,还是整理一些常见的兼容性问题以及解决的方案吧. 一. 浮动元素双边距. ①条件:ie6下,如果给元素设置float,同时给float同一方向设置margin值,则ie6下表现出双倍的边距 ② 代码: .demo { background: #95cfef; border: 1px solid #36f; float: left; height: 100px; margin: 30px 0 0 30px…

原文链接:渔人码头 http://www.cnblogs.com/imwtr/p/4340010.html?utm_source=tuicool&utm_medium=referral 浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况. 这里谈到的浏览器,主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等. 但更多的兼容还是考虑IE6/IE7/FF之间的斗争 先来谈谈CSS Hack 我们为了让页面形成统一的效…

兼容性问题:函数(方法)兼容 描述:部分W3C指定的函数,有部分老的浏览器不支持 解决: 条件判断,如果有,则使用,添加原型方法,例如 String 的 trim 方法 if(!String.prototype.trim){ String.prototype.trim = function(){ return this.replace(/^\s\s*/,'').replace(/\s\s*$/,'') } } 兼容性问题:浏览器视口.屏幕.页面宽高获取 解决: 1. 获得当前页面 HTML文档所…

概述 本小菜平时主要写后台程序,偶尔也会去写点前端页面,写html.css.js的时候,会同时开着ie6.ie7.ie8.ie9.chrome.firefox等浏览器进行页面测试,和大部分前端开发一样,经常被ie折磨,下面就总结一些常见的浏览器兼容性问题,放一起方便自己总结学习,我知道这类型文章,很多大牛都总结过,且写的特别专业.不过我写的都是自己最近碰到的,本人技术一般,也希望各位多加指点.    一.IE6/IE7对display:inline-block的支持欠缺 1)表现描述 这个应该算…

一.html和css 各浏览器的默认内外边距不一致问题 最明显的是ul标签内外边距问题,ul标签在IE-7中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距. 解决办法:*{margin:0;padding:0;} IE8不兼容总结点我查看 input 聚焦框颜色与样式不同 解决办法:使用outline:none,清除默认样式之后再统一设置 点击超链接后,hover.active 样式没有效果 解决方案:lvha的顺序来写 link:平常的状态 visited:被访问过之后 h…

1.关于使用 event对象,出现的兼容性问题IE/Chrom: event.clientX;event.clientYFF/IE9以上/Chrom: 传参e   e.clientX;e.clientY 获取event对象兼容性写法: var oEvent==e||window.event; var oBox = document.getElementById("box") oBox.onclick = function(e){ e=e||window.event; if(e){ al…

1.双倍浮动BUG: 描述:块状元素设置了float属性后,又设置了横向的margin值,在IE6下显示的margin值要比设置的值大: 解决方案:给float的元素添加 display:inline;将其转换为内联元素: 2.表单元素行高不一致: 解决方案: ①.给表单元素添加vertical-align:middle; ②.给表单元素添加float:left: 3.IE6(默认16px为最小)不识别较小高度的标签(一般为10px): 解决方案: ①.给标签添加overflow:hidden;…

DOCTYPE 影响 CSS 处理 Firefox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 Firefox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 Firefox: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 heigh…