广州网站建造集团官网 老直营威尼斯网址开户
老品牌威尼斯网址开户 吾们 效劳 网站建造 移动应用 案例 报道 联系
咨询热线:13711534025

期待聆听您的声音

13711534025

不忽悠,不作恶,不欺诈;敬天理,存良知,思利他。
QQ咨询 QQ咨询 QQ咨询
广州总部 深圳 佛山 广西

与吾们一起分享美好

吾们常见浏览器兼容性小case与解决Plan?

发布时间:2017-03-31 发布作者:老直营威尼斯网址开户 查阅次数:1339次 标签:广州网站建造 广州网站建造集团官网

常见浏览器兼容性小case与解决Plan(面试题目)


1,浏览器兼容小case一:不同浏览器的标签默认的margin和padding不同


小case症状:随便写几个标签,不加样式把握的环境下,各自的margin 和padding异议较大。


碰到频率:100百分比


解决Plan:


可以使用Normalize来清除默认样式,具体可参考文章:来,让吾们谈一谈 Normalize.css


也可以使用如下代码:


body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }

 


2,浏览器兼容小case二:块属性标签float下,又有横行的margin环境下,在IE6显示margin比设置的大


小case症状:常见症状是IE6中下面的一块被顶到下一行


碰到频率:90百分比(稍微复杂点的页面都会碰到,float计划最常见的浏览器兼容小case)


解决Plan:在float的标签样式把握中加入 display:inline;将其转化为行内属性 


备注:吾们最常用的就是div+CSS计划了,而div就是一个典型的块属性标签,横向计划的时候吾们一贯都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性小case。


 


3,浏览器兼容小case三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度


小case症状:IE6、7和遨游里这个标签的高度不受把握,超出自己设置的高度


碰到频率:60百分比


解决Plan:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于您设置的高度。


备注:这种环境一般出Now吾们设置小圆角背下的标签里。出现这个小case的原因是IE8之上的浏览器都会给标签一个较大默认的行高的高度。即使您的标签是空的,这个标签的高度灰子 腔岽锏侥系男懈摺


 


4,浏览器兼容小case四:行内属性标签,设置display:block下采取应用float计划,又有横行的margin的环境,IE6间距bug


小case症状:IE6里的间距比超过设置的间距 


碰到几率:20百分比


解决Plan:在display:block;下面加入display:inline;display:table; 


备注:行内属性标签,为了设置宽高,吾们需要设置display:block;(除了input/img标签比较特殊)。在用float计划并有横向的margin下,在IE6下,他就具有了块属性float下的横向margin的bug。不过因为它本身就是行内属性标签,以是吾们再加上display:inline的话,它的高宽就不可设了。这时候吾们还需要在display:inline下面加入display:talbe。


 


5,浏览器兼容小case五:图片默认有间距


小case症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,通配符清除间距也不起感化。


碰到几率:20百分比 


解决Plan:使用float属性为img计划


备注:因为img标签是行内属性标签,以是只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(也可使用负margin,虽然能解决,但负margin本身就是匆子 侄靡痄榔骷嫒菪ase的用法,以是尽量不要使用)


 


6,浏览器兼容小case六:标签最低高度设置min-height不兼容


小case症状:因为min-height本身就是一个不兼容的CSS属性,以是设置min-height时不能很好的被各个浏览器兼容


碰到几率:5百分比


解决Plan:如果吾们要设置一个标签的较大高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}


备注:在B/S系统上端开发时,有很多环境下吾们有这种需求。当始末小于一个值(如300px)时。容器的高度为300px;当始末高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候吾们就会面临这个兼容性小case。


 


7,浏览器兼容小case七:各种特殊样式的兼容,譬喻透明度、圆角、阴影等。特殊样式每个浏览器的代码相似处很大,以是,只能现查资料通过给不同浏览器写不同的代码来解决。


 


8,清除浮动:


复制代码

    .clearfix::after {

        content: "";

        display: table;

        clear: both;

    }

    

    .clearfix {

        *zoom: 1;

    }

复制代码

  


9,盒模型


Element {

        box-sizing: border-box;

        /*box-sizing: content-box;*/

    }

 


/* CSS hack*/ 


我很少使用hacker的,可能是个人习惯吧,我不喜欢写的代码IE不兼容,然下用hack来解决。不过hacker灰子 欠浅:糜玫摹J褂胔acker我可以把浏览器分为3类:IE6 ;IE7和遨游;其他(IE8 chrome ff safari opera等)


◆IE6认识的hacker 是下划线_ 和星号 *


◆IE7 遨游认识的hacker是星号 *


譬喻这样一个CSS设置:


div { height: 300px; *height: 200px; _height:100px; }

IE6浏览器在读到height:300px的时候会认为高时300px;继续往下读,他也认识*heihgt, 以是当IE6读到*height:200px的时候会覆盖掉上一条的相冲突设置,认为高度是200px。继续往下读,IE6还认识_height,以是他又会覆盖掉200px高的设置,把高度设置为100px;


IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了,因为它们不认识_height。以是它们会把高度解析为200px,剩下的浏览器只认识第一个height:300px;以是他们会把高度解析为300px。因为优先级同样且想冲突的属性设置下一个会覆盖掉上一个,以是书写的次序是很要紧的。 


做兼容页面的方法是:每写一小段代码(计划中的一行或者一块)吾们都要在不同的浏览器中看是否兼容,易于 这般熟练到一定的程度就没这么麻烦了。倡议经常会碰到兼容性小case的新手使用。很多兼容性小case都是因为浏览器对标签的默认属性解析不同遭成的,只要吾们稍加设置都能轻松地解决这些兼容小case。如果吾们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容小case以及怎么去解决这些兼容小case。


实战是解决小case的最佳途径,也是遇到小case的唯一途径,众家多多亲自制作才能更快更好的成长,其余多去借鉴别人的经验也是进步的捷径。

用好表单策划的10个技巧

聊一聊浏览器渲染原理及流程

吾们的地位

广州 广州市天河区岗顶百脑汇高技术大厦B塔27楼 020-6235 2949

深圳 深圳市南山区汉京万国大厦18A 159 8916 9178

广西 茂名市茂南区油城三路广西创业创新孵化基地B110 159 8916 9178

吾们的效劳

网站及移动应用 牛逼直营网站 APP开发 小程序开发 WeChat运营

系统应用开发 OA/ERP/CRM/HR系统开发 教学管理系统 电商系统 应用型软件系统定制开发

了解吾们

集团官网简介 联系吾们 吾们的案例 讯息报道

使用条款 隐私声明 Cookies

© 2009-2020 老直营威尼斯网址开户 版权一切 广ICP备16051058号

XML 地图 | Sitemap 地图