对兼容ie浏览器所遇到的问题及总结
1,若直接给一个元素设置absolute定位。在浏览器缩放的时候。位置会错位。解决的方法是给外层的元素设置为relative定位。
2,低版本ie浏览器不支持placeholder属性
3,盒模型上规定了垂直边界重叠,若父元素有一个向上的margin值(10px),其子元素有一个向上的margin值(20px)。重叠部分取大者。因此父元素和上一个div之间出现的是20px的空隙。
4,使用display:inline-block会导致元素之间有空隙,解决方法:父元素设置font-size:0或采用浮动的方法;
5,Ie 8及以下不支持透明度的写法,低版本的ie浏览器的透明度写法filter:alpha(opacity:).
6,在谷歌浏览器中,一个li标签中存在一个a标签和一个span,li标签浮动,a标签旁边会多出来几px。解决方法是a标签进行浮动
7,要让背景图片使用ie-css.htc的border-radius属性。有bug。很难使用。最好把背景换成img来使用。
8,关于ie-css.htc的使用方法。Z-index要比周围元素大;要有定位属性;behavior中的路径最好写成绝对路径
9,ie浏览器低版本的一个bug,透明元素不响应hover事件!
10,在做区别ie8,ie9的hack的是时候。使用/9,/9/0来实现。发现若是做颜色的hack。可达到目的。若做margin-top的hack。发现在ie8,9下实现的效果是一样的。故猜测此hack只支持部分属性
11,在ie8里background: url(../images/goods.png)no-repeat!important; 背景图片不显示
background: url(../images/goods.png) no-repeat!important; 背景图片显示。 差距仅仅是多了个空格。
12,jquery中的trigger无法触发hover
13,在低版本ie浏览器下实现使用PIE.htc方法并要使背景透明的方法
background: url(../imgs/news-circle.png) no-repeat rgba(0,0,0,0.5);
-pie-background: url(assets/common/imgs/news-circle.png) no-repeat rgba(0,0,0,0.5); /*路径相对于html页面而言*/
-ms-border-radius: 350px 350px 0px 0px;
border-radius: 350px 350px 0px 0px;
behavior: url(PIE/PIE.htc);/*路径相对于html页面而言*/
14,在ie 6下使用button标签或input type=“button”或input type=“submit”时。并给它们加上border属性的时候。会发现外层绕着一层白色缝隙。解决的办法可以给它本身的css属性border:none 0;并给它加一个嵌套层。给嵌套层加一个border属性。
15,在ie7下发现padding-bottom属性失效。解决的方法是加上属性overflow:hidden;
16,在ie6下发现padding-bottom属性失效。解决的方法是让被他嵌套的最后一个元素设置margin-bottom值。
17,在ie 6下元素有默认的行高。解决方法是overflow:hidden;或font-size:0;或line-height:xx px;
18,ie 6下快元素进行浮动。并且有横向的margin,实际的margin会比设置的margin多一倍。解决的方法是display:inline;
19,在各个浏览器下img有空隙(回车的原因)。解决的方法是让图片浮动或给图片的包含层加font-size:0。
20,两个块元素,竖向的margin值不增加,会重叠,其间距为最大的margin值。
21,ie6对!important属性不支持
22,z-index不起作用的bug:
1)ie6下 首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个:1、父标签position属性为relative;2、问题标签含有浮动(float)属性。
2)所有浏览器:它只认第一个爸爸
层级的高低不仅要看自己,还要看自己的老爸这个后台是否够硬。用术语具体描述为:
父标签position属性为relative或absolute时,子标签的absolute属性是相对于父标签而言的。而在IE6下,层级的表现有时候不是看子标签的z-index多高,而要看它们的父标签的z-index谁高谁低。
23,css hack:
_height:100px; /*ie 6专用*/
*+height:100px; /*ie 7专用*/
*height:100px ; /*ie6,ie7共用*/
height:100px\0; /*ie8,ie9,ie10共用*/
height:100px\9; /*ie6,ie7,ie8,ie9,ie10共用*/
height:100px\9\0; /*ie9,ie10共用*/
对兼容ie浏览器所遇到的问题及总结的更多相关文章
- CSS兼容各浏览器的hack
CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定 ...
- 【原】CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- JS获取回车事件(兼容各浏览器)
一.用到onkeydown获取事件动作, 二.用到键盘对应代码keyCode, 三. var event=arguments.callee.caller.arguments[0]||window.ev ...
- CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- 前台JS(type=‘file’)读取本地文件的内容,兼容各种浏览器
[自己测了下,能兼容各种浏览器,但是读取中文会出现乱码.自己的解决方法是用notepad++把txt文件编码改为utf-8(应该是和浏览器编码保持一致吧?..)] 原文 http://blog.cs ...
- 【转】让Bootstrap 3兼容IE8浏览器
FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...
- 【转】向HTML中插入视频并兼容所有浏览器的方法
原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...
- 让Bootstrap 3兼容IE8浏览器
最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...
- 兼容所有浏览器的设为首页收藏本站js代码
大家发现传统的收藏本站按钮在360浏览器下面没有效果了,但是360浏览器用户群却非常之大.所以我们在网上找到一个兼容所有浏览器的收藏本站解决方案,具体功能如下: 设为首页 和 收藏本站js代码 兼容I ...
- 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...
随机推荐
- Mac显示隐藏文件的终端命令
显示:defaults write com.apple.finder AppleShowAllFiles -bool true隐藏:defaults write com.apple.finder Ap ...
- myeclipse10安装findbugs
尝试过myeclipse10环境下,在线安装findbugs,插件包是能下载到指定目录下,可是由于版本问题,findbugs插件是不能使用的.所以才有了下面的离线安装 离线安装findbugs 操作系 ...
- androidannotation study(1)---Activity, Fragment,Custom Class & Custom View
androidannotation 是github上的一个开源项目. 主要是注解机制,可以改善android写代码的效率. Activity 使用 1.@EActivity 注解 可想而知,servi ...
- img标签使用默认图片的一种方式
基于html5提供的onerror这个时间属性.
- 基于git的工作流程
本文针对的是追求极致.快速的产品响应团队的.以下的观点和内容都是围绕这个主题,暂时不涉及个人学习和团队学习. 在说工作流程之间,想说一下我们平常工作中遇到的一些困惑或者说现象 在一个团队里,同时有好多 ...
- 连接Oracle远程数据库错误:ORA-12541,ORA-12514,ORA-01017的解决方法!
1.出现如下错误:ORA-12541:TNS:no listener,如下图所示: 错误原因是我们没有开启Listener监听器服务,解决方法是在服务中开启这个服务,如下图所示. 2.出现如下错误:O ...
- Android开发之 Android 的基本组件的概述
Android是一个为组件化而搭建的平台,它的应用是由一些零散的有联系的组件组成,并通过AndroidManifest.xml文件 把它们绑定起来. Android常用的组件有: Activity(活 ...
- linux进程间通信-XSI IPC
一 什么是XSI IPC 有三种 IPC我们称作XSI IPC,即消息队列.信号量以及共享存储器(共享内存),它们之间有很多相似之处. 二 标识符和键 每个内核中的 IPC结构(消息队 ...
- Error during installing HAXM, VT-X not working 在安装HAXM错误,开始不工作
最佳答案 (Best Answer) Some antivirus options prevent Haxm installation. ie: Avast : settings (parametre ...
- 微信公众号开发之LBS
百度地图Web服务api:http://lbsyun.baidu.com/index.php?title=webapi 1.测距 Route Matrix API v2.0:http://lbsyun ...