在前端工作中遇到的一些常见的兼容问题

1.图片下方3像素:在div中插如图片时,图片会将div下方撑大3px;

解决方案:(a)将<div>和<img>写在一行上(IE6、ie7);

     (b)将<img>转为块状元素,给<img>添加声明:display:block;

     (c)给<div>加overflow:hidden;

2.换行产生3像素;

解决方案:(a)不换行,将元素放在一行显示;

     (b)给元素加浮动;

3.鼠标指针bug:cursor属性的hand属性值只有IE浏览器识别,其他浏览器不识别该声明,cursor属性的pointer属性值IE6.0以上版本及其他内核浏览器都识别该声明;

解决方案:如统一某元素鼠标指针形状为手型,应添加声明cursor:pointer

4.li里a加display:block,出现行高不一致;

解决方案:(a)给<a>加display:inline-block;

     (b)给<a>加display:inline;

5.图片超链接边框(ie9以下);

解决方案:给<img>添加border:none;    

6.超链接图片边框一半;

解决方案:给<a>标签添加display:inline-block;  

7.表单按钮元素不对齐;

解决方案:(a)给表单元素加float;

     (b)把图片按钮换成普通按钮;

     (c)用<a>标签伪装按钮;

8.margin值叠加(火狐和谷歌);

解决方案:(a)给子元素加float;

     (b)给父元素添加padding或border;

9.用li写的导航在ie7以下呈阶梯状;

解决方案:给<li>加float;

10.双倍边距:当一个元素里浮动方向与外边距方向一样时,会错误的把margin值显示为双倍;

解决方案:(a)给元素添加声明display:inline;

     (b)给父元素添加margin-left:1/2;

11.部分元素有默认高度(一个字的高度);

解决方案:(a)给元素添加声明font-size:0px;

     (b)给父元素添加声明overflow:hidden;

12.百分比bug:在解析百分比时,会按四舍五入方式计算,导致50%加50%大于100%的情况;

解决方案:给右边的浮动元素添加声明clear:right;

13.ie6浏览器下文字重复;

解决方案:元素之间有HTML注释影响,将其删除即可;

14.ie6浏览器元素高度会被撑大;

解决方案:给元素添加overflow:hidden;

15.除a标签以外使用伪类选择器IE6一律不认识;

解决方案:替换成a标签

16.png24的图片在IE6浏览器上出现背景;

解决方案:做成png8格式的,也可以引用一段脚本;

17.像素问题:使用多个float和注释引起的;

解决方案:给元素添加display:inline -3px;

18.超链接hover点击后失效;

解决方案:使用正确的书写顺序,link、visited、hover、active;

19.z-index问题

解决方案:给父级元素添加position:relative;

20.最小高度:IE6不支持min-height属性,但它却认为height就是最小高度;

解决方案:使用ie6不支持但其余浏览器都支持的属性!important;

21.select在IE6下遮盖;

解决方案:使用iframe嵌套;

22.li边距"无故"增加;

解决方案:设置ul的显示形式为 *display:inline-block 即可,前面 * 是只针对IE6/IE7有效;

23.overflow:在IE6/7中,overflow无法正确的隐藏有相对定位position:relative的子元素;

解决方案:给外包容器加上position:relative;

24.border:none在IE6中不起作用;

解决方案:写成border:0 就好了;

25.100%高度,如果要给元素定义100%高度,必须要明确定义它的父级元素的高度,如果你要定义满屏的高度,就得先给HTML和body定义height:100%;

26.一些定义了:hover的链接,当鼠标移到那些链接上的时候,在IE6下就会触发躲猫猫;

结局方案:(a)在那个未浮动的内容之后加上<span style="clear:both"></span>;

     (b)触发包含了这些链接容器的hasLayout,一个简单的方法就是给其定义height:1%;

27.IE6绝对定位的元素1px间距:当绝对定位的父元素或宽度为奇数时,bottom和right会多出现1px;

解决方案:针对IE6进行hack处理;

时间: 2024-11-05 11:24:07

在前端工作中遇到的一些常见的兼容问题的相关文章

知乎上关于前端工作中经常遇到的问题总结

有哪些经常被误用的 HTML.JavaScript.CSS 的元素.方法和属性? 以前想要把一个元素(input 之类的)设成只读的时候都是用 disabled,后来发现这是不对的. 因为在 HTML 里面,如果一个元素被设置成 disabled, 那么它的值就不会被发送到 server 端. 正确的做法应该是使用 readonly. 那么除了这个 disabled,在 Web 开发中还有哪些东西是经常被误用的? 添加评论分享 按票数排序 按时间排序 21 个回答 一丝,专业 CSS 吐槽,下面

前端工作中的点点滴滴(二)

最近做web app.项目要添加表情,对这个以前没关注过,所以研究了一下.我要做的是一个[消息盒子],显示别人的回复以及我关注的事件的进展,这里面涉及到显示他人评论的问题,假如都是文字还好说,要是有表情呢?不好办~! 后台发给我的评论数据是字符串,表情也被例如"[撇嘴]"这样的字符串所替代,这里面首先涉及到的问题就是如何从字符串中筛选出合法的表情字符,比如像"[123]"这样的字符就是非法无效的,而且人家可能就是在评论里面写了中括号括起来的字符串,可不能给人家变成表

linux目录架构(工作中一级目录和常见二级目录详解)

linux系统的目录结构 目录结构特点: (1)目录结构和分区设备是没有关系的,也就是不同的目录可以跨越不同的磁盘设备或分区 (2)linux的目录结构也是有规律的,而且也是按照类别组织的 (3)区分绝对路径和相对路径 目录层次标准FHS FHS linux目录定义标准 FHS定义了两成规范 第一层是"/"目录下的各个目录应该放什么文件数据 第二层是针对/usr和/var这两个目录的子目录来定义 /根目录,一级目录 逻辑上所有的目录只有一个顶端/(跟),所有目录顶点 /        

前端工作中一些关于hosts的简单设置

hosts原理: hosts文件存放的就是一些常用的网站主机的域名和其对应的IP地址.当我们访问网络的时候,可是以用浏览器在地址栏中输入网站的域名并回车,也可以是PING一个网站的域名等,系统往往会首先检查本地的HOSTS表文件,看其中是否已经有相应的域名与IP地址的对应关系,如果有就会直接采用,如果没有,那么就得由DNS服务器进行域名解析完成域名与IP的转换工作. 使用场景: 1.加快域名解析 对于要经常访问的网站,我们可以通过在Hosts中配置域名和IP的映射关系,提高域名解析速度.由于有了

前端工作中的点点滴滴(一)

验证一个css属性是否被支持,这算是一个比较基础的问题.另外一方面,我们不仅想知道一个属性是否被支持,还想知道某个属性的特定类型的值是否被支持.例如background-color可以有rgba类型的数值,但并不是所有浏览器都支持,如何确定一款浏览器支不支持rgba类型的值呢?我认为Modernizr这款库就为我们提供了一个很好的手段.Modernizr是如何做的呢?具体来说用到了[属性]这个概念,这个概念在C#中显得非常重要.只有当你输入的数值是合法的,才会继续后面的操作.也就是,对于浏览器来

前端工作中遇到的问题总结1

1.button里面,用letter-spacing调整中文字间距 问题描述:设置之后现代浏览器无法使文字水平居中,会偏右,原因:最后一个字后面也有间距存在解决方式:用空格解决;或者用paddding-left:2px解决 2.兼容ie6,7,8背景透明内容不透明解决方法: rgba(a,b,c,0.8); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); -ms-filter: "progid:DXImageTransfo

前端工作中遇到的问题总结

1.button里面,用letter-spacing调整中文字间距 问题描述:设置之后现代浏览器无法使文字水平居中,会偏右,原因:最后一个字后面也有间距存在解决方式:用空格解决;或者用paddding-left:2px解决 2.兼容ie6,7,8背景透明内容不透明解决方法: rgba(a,b,c,0.8);filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);-ms-filter: "progid:DXImageTransform

工作中常遇到容易忘记的兼容问题

1. <input type="file" > 用这个功能一般都会嫌弃自带的效果想要用美哒哒的图片替换 解决方案:定位然后透明化 opacity: 0; filter: "alpha(opacity=0)"; filter: alpha(opacity=0);-moz-opacity: 0; 所有浏览器兼容 2. 背景透明 解决方案: background:#000; filter:alpha(opacity=50); -moz-opacity:0.5;

前端面试中的常见的算法问题

虽说我们很多时候前端很少有机会接触到算法.大多都交互性的操作,然而从各大公司面试来看,算法依旧是考察的一方面.实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的.如果将来当我们面对较为复杂的问题,这些基础知识的积累可以帮助我们更好的优化解决思路.下面罗列在前端面试中经常撞见的几个问题吧. Q1 判断一个单词是否是回文? 回文是指把相同的词汇或句子,在下文中调换位置或颠倒过来,产生首尾回环的情趣,叫做回文,也叫回环.比如 mamam redivider . 很多人拿到这样的题目非常容易