每天一个小知识点20(面试可能问到的兼容问题)
来源:互联网 发布:攻城掠地控号手软件 编辑:程序博客网 时间:2024/06/08 05:14
我们已经知道的兼容性问题有哪些呢?
ajax xmlhttprequest对象的获得
绑定事件
event对象的获得
CSS最终样式的获取
1:浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同
问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
碰到频率:100%
解决方案:CSS里 *
备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
2:浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
<div id="first"></div>
#first{
background-color: red;
width: 200px;
height: 200px;
float: left;
margin-left: 100px;
display: inline;
}
3: 浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
碰到频率:60%
解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
#first{
background-color: red;
width: 200px;
height: 10px;
overflow: hidden;
}
<div id="first"></div>
4:
几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。
使用float属性为img布局
<img src="images/20664369-1_b.jpg" alt="" class="img">
<img src="images/20670230-1_b.jpg" alt="" class="img">
<img src="images/20679764-1_b.jpg" alt="" class="img">
.img{
background-color: red;
float: left;
}
5:ie6 不支持 fixed 这个东西,所以我们的该怎么做呢?
6:关于手形光标. cursor: pointer. 而hand 只适用于 IE.
7:浮动ie产生的双倍距离
#box{ width: 200px;
height: 200px;
background-color: red;
float:left; width:100px; margin:0 0 0 100px;}
<div id="box"></div>
解决方案:display: inline---/使浮动忽略
8:ie7,ie8,firefox,chrome等高端浏览器下,已经可以识别 !important属性,但是Ie6是不行的
#colortest
{border:20px solid #60A179 !important;
border:20px solid #00F;
padding: 30px;
width : 300px;}
<div id="colortest"></div>
这里有个新的东西if ie
<style type="text/css">
#colortest
{width: 100px;height: 100px;background-color: red}
</style>
<!--[if IE]>
<style type="text/css">
#colortest
{width: 100px;height: 100px;background-color: blue}
</style>
<![endif]-->
<div id="colortest"></div>
可以判断当前浏览器是否为ie浏览器
- 每天一个小知识点20(面试可能问到的兼容问题)
- 面试可能问到的问题
- IOS 面试可能会问到的知识点
- 每天一个小知识点22(cookie)
- 测试人员面试时可能问到的问题
- ios面试时可能问到的问题(新手,技术大牛勿喷)
- C++面试中容易问到的知识点
- 每天一个小知识点1(less整理)
- 每天一个小知识点2(sass总结)
- 每天一个小知识点5(闭包总结)
- 每天一个小知识点6(bootstrap总结)
- 每天一个小知识点7(jQuer总结一)
- 每天一个小知识点8(jQuer总结二)
- 每天一个小知识点9(jQuer总结三)
- 每天一个小知识点10(jQuerMobile总结一)
- 每天一个小知识点11(jQuerMobile总结二)
- 每天一个小知识点12(jQueryMobile总结三)
- 每天一个小知识点13(Angularjs总结一)
- 【数论】poj1811Prime Test
- Java学习之路:不走弯路,就是捷径
- [记录]学习<<QT学习之路2>>第五天
- Swift对于可选类型(Optionals)讲解不错的文章
- 黑马程序员------OC block(代码块)和protocol(协议)
- 每天一个小知识点20(面试可能问到的兼容问题)
- 测试连接MySQL数据库时遇到的一些问题
- HDU 4115 Eliminate the Conflict(2-SAT)
- Best Time to Buy and Sell Stock III
- 3Sum
- What does => and () => mean in Scala
- ISE中FPGA的实现流程
- Emacs 帮助系统
- Hibernate查询数据库的三种方式