注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一车,一房,一个温暖家

10万左右的车,80平方的房子,这是我奋斗的暖暖的家

 
 
 

日志

 
 

【转载】常见浏览器兼容问题  

2015-05-30 12:58:13|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自Anything《常见浏览器兼容问题》
IE6下的怪癖解析
条件:IE6下、html文档中没有声明<!DOCTYPE HTML>
解决:在html文档中声明<!DOCTYPE HTML>

不同浏览器有不同的默认的margin和padding
解决:在css reset部分设置margin:0和padding:0清除默认样式

img标签与img标签之间有默认的间距
条件:img标签与img标签之间有换行
解决:1.给img设置float
    2.vertical-align:top

a嵌套img标签时,不同浏览器下有不同的border
条件:a嵌套img
解决:给img设置border:none或者border:0

IE6不支持除a标签以外的hover
条件:IE6、有非a的hover
解决:合理使用标签的hover

IE6下最小高度bug
条件:IE6、给容器设置的高度小于文字本身的高度
解决:1.overflow:hidden
    2.line-height

IE6不支持最大/小高度/宽度bug
条件:IE6、设置了max/min-height/width
解决:使用hack

margin-top:100%基于父元素的宽度来计算
条件:设置了margin-top:100%
解决:在设置margin-top时尽量不使用百分数

margin竖向合并取其大者的bug
条件:相邻的俩个元素(即中间没有内容、border、padding)、竖向的margin相加

margin-top的bug(给子元素设置的margin-top会作用到父标签上)
条件:父标签没有border,也没有padding、子元素设置了margin-top
解决:1.给父标签设置border-top
    2.给父标签设置padding(控制父子标签之间的距离最好用padding,兄弟标签用margin)
    3.给父标签加overflow:hidden; *zoom:1

IE6下横向双倍bug
条件:IE6、块元素、浮动、有横向的margin
解决:_display:inline

浮动复制最后一个字符bug
条件:多个元素连续浮动
解决:给浮动元素加position:relative

li里面有浮动元素,底部多出3px bug
条件:IE6、li里面有浮动元素
解决:1.给li设置浮动
    2.vertical-align:top

li里面有a和span,span右浮动,span会显示在下一行的右边
条件:IE6、span浮动、布局时a写在了span的前面
解决:将浮动元素span放在a的前面

FF下,input输入框的光标不继承字体大小bug(reset设置的字体大小对光标无效
条件:FF、没有单独给input设置字体大小
解决:给input设置字体大小
  评论这张
 
阅读(1)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018