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

shan123      2022-02-08     237

关键词:

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处理;

前端兼容性问题——总览

在Web前端开发中,浏览器兼容性问题是一个常见的挑战。由于不同的浏览器实现了不同的标准和规范,因此相同的代码在不同的浏览器上可能会有不同的表现,或者甚至无法正常工作。前端兼容性问题——总览在Web前端开发中,... 查看详情

css中一些常见的兼容性问题

CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗。CSShack中的一些事:我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,所以我们就把这个针对不同... 查看详情

前端程序员面试的坑,简历写上这一条信息会被虐死!

...Dreamweaver不是主流的开发工具,也不方便配合目前流行的前端工程化解决方案。以下是一些常见的技能点,希望大家也能够帮忙补充。精通HTML这意味着能够正确理解语义化,了解新老标签的特点和实用场景。可以通过观察网页,... 查看详情

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

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

在前端项目开发中常见的ios与安卓的兼容性问题(代码片段)

1、日期兼容性安卓系统下Date.parse(newDate(‘2018-03-3012:00:00’))会直接转换成时间戳的形式(简单说就是整数形式)ios系统下Date.parse(newDate(‘2018-03-3012:00:00’))sorry,转换不了解决办法:Date.parse(newDate(‘2018/03/3012:0 查看详情

使用processonh绘制流程图的过程中一些常见的问题

...出现了bug,或者是产品不支持该操作,但后来在接下来的工作中发现是因为自己并不是很熟悉工具平台的使用,所以导致了在操作过程中出现了一系列的问题,然后就留心把自己遇到的不解的问题都进行了一下整理,汇总了那些... 查看详情

javascript中一些常见的兼容性问题整理

javaScript中一些常见的兼容性问题整理1)滚动条:document.documentElement.scrollTop||document.body.scrollTop2)获取样式兼容functiongetStyle(dom,styleName){returndom.currentStyle?dom.currentStyle[styleName]getComputedStyle(dom)[ 查看详情

五大主流浏览器的内核,前端在ie浏览器中常见的兼容问题

一标题五大主流浏览器及其内核1、Trident代表作:IE元老级内核之一,由微软开发,并于1997年10月首次在ie4.0中使用,凭借其windows垄断优势,Trident市场占有率一直很高。然而垄断并非,没有竞争就没有进步&... 查看详情

求职简历中一些常见的问题

...事业起步的第一步。最近,我和同事一起阅读了一些应聘前端开发人员的简历,发现很多简历都存在相同的问题。在这篇文章中,我罗列出我认为简历中存在问题的地方,供大家参考。问题一:过分夸大自己的能力某位只有一年... 查看详情

几种常见的优化算法

...w.cnblogs.com/maybe2030/  我们每个人都会在我们的生活或者工作中遇到各种各样的最优化问题,比如每个企业和个人都要考虑的一个问题“在一定成本下,如何使利润最大化”等。最优化方法是一种数学方法,它是研究在给定约束... 查看详情

常见的兼容性问题解决

...,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 在学习浏览器兼容性之前,我想把前端开发人员划分为两类:第一类是精确按照设计图开发的前端开发人员,可以说是... 查看详情

常见的浏览器兼容问题

...,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 在学习浏览器兼容性之前,我想把前端开发人员划分为两类:第一类是精确按照设计图开发的前端开发人员,可以说是... 查看详情

几种常见的优化算法

我们每个人都会在我们的生活或者工作中遇到各种各样的最优化问题,比如每个企业和个人都要考虑的一个问题“在一定成本下,如何使利润最大化”等。最优化方法是一种数学方法,它是研究在给定约束之下如何寻求某些因素... 查看详情

前端常见的浏览器兼容性问题及解决方案

常见的兼容性问题:1、不同浏览器的标签默认的外补丁(margin)和内补丁(padding)不同解决方案:css里增加通配符*margin:0;padding:0; 2、IE6双边距问题;在IE6中设置了float,同时又设置margin,就会出现边距问题解决方案:设置display:inline... 查看详情

自己主动图片生成在前端开发中的一些尝试

图片处理在前端开发过程中占领了不少的时间。非常是累人。在本文中我们不讨论怎样提高切图的效率。我们讨论还有一个问题:怎样处理设计稿中的一些简单图形。不知道你又没有遇到过这样的烦恼:“设计师给你的精致的PSD... 查看详情

前端开发过程中遇到过啥困难?

面试前端开发工程师,对方问:“开发中遇到过什么困难,如何解决的?”这个问题应该怎么回答?希望大神给个范文。不要给什么问题分析、思路之类的,就是要一个可以背下来的范文。开发中主要会用到Vue、vue-cli、webpack、n... 查看详情

ie8常见兼容问题及解决方法总结(代码片段)

    IE8及以下版本的浏览器对前端来说就是一个BUG的存在,但是总也绕不过去,非技术性官网一般会要求网站兼容到ie8,有时候甚至要到ie7,总之IE8是一定要能hold住。最近公司一个比较小众的项目,因为要通过控件... 查看详情

gprsdtu设备常见的问题分析

...设置    a、检查串口参数是否与GPRS模块的工作参数一致;    b、检查用户自己的串口线 查看详情