文档章节

小记浏览器兼容问题

Rella蕾拉
 Rella蕾拉
发布于 2015/03/18 15:47
字数 778
阅读 142
收藏 7

最近面试了几家公司,发现都爱问浏览器兼容的问题啊,哪个元素会有兼容问题,都能大约猜到,要我一个一个说,确是不能说太多,于是回家整理下以前的笔记,网上也找了些。


1. IE6下图片下方有空隙产生: 设置img display:block 或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom


2. z-indexie7 容易混乱,一定要给要给浮动的层的最上层的父级模块标签也写上z-index


3.在IE6及更早浏览器中无法定义小高度的容器?IE6及更早浏览器之所以无法直接定义较小高度的容器,是因为默认会有行高

    解决方法:overflow:hidden;height:1px;font-size:0;line-height:0;


4. 当在IE6及更早浏览器中出现浮动后margin值解析为双倍的情况,设置该元素的display属性为inline即可(其实IE6都要淘汰了,没有必要再兼容IE6了,面试的时候说说,这个好多人知道,会比较得到不太懂前端的领导的认可)。


5. 早期浏览器不能实现min-height效果?这个有办法解决么?我一般就是针对该浏览器写个固定高度如 _height:500px;min-height:500px; 因为height是默认auto的,目前就遇到IE6不支持啊,有必要兼容么?注意不能再设置overflow的值为hidden,否则模拟min-height效果将失效


6. 按钮在IE7及更早浏览器下随着内容增多两边留白也随着增加的问题?解决方法:input,button{overflow:visible;}


7. IE7及更早浏览器下当li中出现2个或以上的浮动时,li之间产生的空白间隙的BUG?设置 vertical-align属性任何值都可以,还有button,checkbox,radio,img等元素,对不齐的,留空白间隙的,都试试这个属性,再调margin。


8. 如何解决IE6使用滤镜PNG图片不透明?用png-8格式


9. 如何解决IE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效的问题?

BUG重现:

===================================================

div{overflow:auto;width:150px;height:100px;border:1px solid #ddd;}

p{position:relative;margin:0;}

<div>

<p>IE7就可以看到这个BUG啦</p>

<p>IE7就可以看到这个BUG啦</p>

<p>IE7就可以看到这个BUG啦</p>

<p>IE7就可以看到这个BUG啦</p>

<p>IE7就可以看到这个BUG啦</p>

<p>IE7就可以看到这个BUG啦</p>

<p>IE7就可以看到这个BUG啦</p>

</div>

====================================================

如上代码,在IE7及更早浏览器下你会看到div的滚动条将无法工作。解决方案是给div也设置相对定位position:relative


10. float元素,一般兄弟元素,会跟随前面那个浮动,有时候一个div正好放2个块级元素,如果左边float:left;右边不写也会跟随浮动,但火狐就会掉下来。


CSS3标准中的,就不说了,大部分早前浏览器不支持


© 著作权归作者所有

Rella蕾拉
粉丝 270
博文 28
码字总数 14248
作品 0
长沙
程序员
私信 提问
加载中

评论(2)

寂寞的原子
寂寞的原子
现在前端还要关心IE的兼容性么。。。IE6-8这些完全不会,哈哈
BeGit
BeGit
了解下
[CSS]说说CSS Hack 和向后兼容

说说CSS Hack 和向后兼容标签:css, css hack, 向后兼容Design人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了。增长总是快于消亡导致了浏览器兼...

xcntime
2010/08/11
0
0
xhEditor v1.1.8 发布,开源XHTML在线编辑器

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE6、IE7、IE8、IE9、Firefox 3.0+、Opera 9.6+、Chrome 1.0+、Safari 3.22+。 该版本主要提供以...

V
2011/07/10
0
0
处理CSS3跨浏览器兼容的工具--Prefixr

CSS3增加的新特性实现了很给力的效果,那你是否有编写过跨浏览器的CSS3代码呢,要针对不同的浏览器写一堆的CSS3代码前缀。Prefixr就是一个能将CSS3代码自动生成跨浏览器CSS代码的在线应用。 ...

匿名
2011/12/11
3.4K
0
最好用最安全的三种ETH(以太坊)钱包

1. MyEtherWallet MyEtherWallet上手操作简单,无需下载,直接在网页上就可以完成所有的操作。在MyEtherWallet上生成的私钥由用户自己保管,平台方并无备份。 优势: 方便快捷,访问网页即可使...

斑马区块
2018/07/26
0
0
xhEditor v1.1.8 发布,XHTML在线编辑器

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE6,IE7,IE8,IE9,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。 更新小记: 从2009年4月第...

YanisWang
2011/07/08
722
1

没有更多内容

加载失败,请刷新页面

加载更多

分享一波 RabbitMQ 面试题有答案

1、什么是rabbitmq 2、为什么要使用rabbitmq 3、使用rabbitmq的场景 4、如何确保消息正确地发送至RabbitMQ? 如何确保消息接收方消费了消息? 发送方确认模式 接收方确认机制 接收方消息确认...

搜云库技术团队
刚刚
0
0
2019年JAVA面试题(高级资深)

记录下本年度最新的面试题: 2019-04-24 //某互联网公司,劳工资源管理方向职位 1.bio/nio/aio介绍下,粘包、拆包问题怎么解决? 2.数据库四个特性是什么,事务传播性是怎么样的?spring事务和...

em_aaron
3分钟前
0
0
yarn如何全局安装命令以及和环境变量的关系

npm全局安装 npm i -g xxx yarn 全局安装 yarn global add xxx 然而你可能会发现npm全局安装后的命令可以直接使用,而yarn却不行,这是为什么呢? 我们来查看下npm和yarn的bin目录 使用npm全...

单线程生物
12分钟前
0
0
异步线程RequestContextHolder.getRequestAttributes()为null

使用Spring框架,在Service中开启一个新的线程,在新的线程中使用 RequestAttributes ra = RequestContextHolder.getRequestAttributes(); 获取出来为null,有没有什么办法能解决? 问题出现...

xiaomin0322
15分钟前
0
0
mingw64环境搭建

mingw64环境搭建 转自:http://www.cr173.com/soft/132367.html MinGW64位版,默认编译出来是64位的,需要编译32位请使用-m32 参数!mingw是一款gnu工具集合是Minimalist GNU on Windows的简称...

shzwork
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部