<meta name="keywords" content="华夏棋牌,浏览器不兼容,css" />
华夏棋牌 > web前端 > css教程 > 注释

css浏览器不兼容启事剖析及处置赏罚赏罚措施第1/2页_履历交流

原创 2016-05-16 12:05:12 0 145
赞助会员专享特权
不才不才,归结几点html编码要素,望能指导列位:
1.文字自己的年夜小不兼容。异常是font-size:14px的宋体文字,在不合浏览器下占的空间是纷歧样的,ie下现实占高16px,下留白3px,ff下现实占高17px,上留白1px,下留白3px,opera下就更纷歧样了。处置赏罚赏罚妄图:给文字设定 line-height 。确保一切文字都有默许的 line-height 值。这点很主要,在高度上我们不克不及容忍1px 的差异。

2.ff下容器高度限制,即容器界说了height以后,容器边框的形状就一定了,不会被内容撑年夜,而ie下是会被内容撑年夜,高度限制掉落效。以是不要随便忽略给容器界说height。

3.还议论辩说内容撑破容器效果,横向上的。假定float 容器未界说宽度,ff下内容会尽能够撑开容器宽度,ie下则会优先推敲内容折行。故,内容能够撑破的浮动容器须要界说width。

小实验:有兴趣年夜家可以看看这段实验。在不合浏览器下划分测试以下各项代码。


a.<div style=”border:1px solid red;height:10px”></div> b.<div style=”border:1px solid red;width:10px”></div>

c.<div style=”border:1px solid red;float:left”></div> d.<div style=”border:1px solid red;overflow:hidden”></div>

下面的代码在不合浏览器中是纷歧样的,实验泉源于对小height 值div 的应用,<div style=”height:10px;overflow:hidden”></div>,小height 值要合营overflow:hidden一起应用。实验好玩而已,想诠释的是,浏览器对容器的界线诠释是年夜不类似的,容器内容的影响效果各不类似。

4.浮动的扫除,ff下不扫除浮动是不行的。

纠正年夜家一个误区,遇到不兼容就说ff烂是纰谬的,着实更多时间是ie的希奇体现让我们无所适从。以以下出ie6的种种劣迹。

5.最被末路恨的,double-margin bug。ie6下给浮动容器界说margin-left 或许margin-right 现实效果是数值的2倍。处置赏罚赏罚妄图,给浮动容器界说display:inline。

6.mirrormargin bug,当外层元素内有float元素时,外层元素如界说margin-top:14px,将自动天生margin-bottom:14px。padding也会泛起类似效果,都是ie6下的特产,该类bug 泛起的情形较为严重年夜,远不只这一种泛起条件,还没系统整理。处置赏罚赏罚妄图:外层元素设定border 或 设定float。

引申:ff 和ie 下对容器的margin-bottom,padding-bottom的诠释有时不不合,似乎与之相关。

7.吞吃情形,限于篇幅,我就不睁开了。照样ie6,曲折两个div,下面的div设置配景,却发现下面没有设置配景的div 也有了配景,这就是吞吃情形。对应下面的配景吞吃情形,尚有迁徙转变下边框缺掉落的情形。处置赏罚赏罚妄图:应用zoom:1。这个zoom好象是专门为处置赏罚赏罚ie6 bug而生的。

8.注释也能发生bug~~~“多出来的一只猪。”这是祖先总结这个bug应用的文案,ie6的这个bug 下,年夜家会在页面看到猪字泛起两遍,重复的内容量因注释的若干而变。处置赏罚赏罚妄图:用“<!–[if !IE]> picRotate start <![endif]–>”措施写注释。

9.<li/>里加 float <div/>,这是一个尺度的,棘手的兼容效果,欲望惹起年夜家看重 ,给li 不合的属性会有不合的诠释效果,ff下的诠释稍可明确,ie6下的诠释会让你摸不着头脑,由于效果的严重年夜性,将另起一文专门议论辩说该效果。在《ul运居心得》一文里有相关效果,却没给出效果处置赏罚赏罚的历程。

10.应用了“float:left;display:inline”的ul的希奇体现。可以看出这句css是针对ie6下的double margin bug 而加上的display:inline,这也是我的css系统里的主要一环,在《ul运居心得》一文中有相关叙述。而这句css用在ul上会让你凄凉不堪。点到为止,这里不克不及多说哈。

11.img下的留白,年夜家看这段代码有啥效果:

<div>
<img src=”” src=”” />
</div>

把div的border掀开,你发现图片底部不是紧贴着容器底部的,是img前面的空缺字符组成,要扫除必须这样写

<div>
<img src=”” src=”” /></div>

前面两个标签要紧挨着。ie7下这个bug 依然存在。处置赏罚赏罚妄图:给img设定 display:block。

12.掉落去line-height。<div style=”line-height:20px”><img />文字</div>,很遗憾,在ie6下单行文字 line-height 效果消掉落了。。。,启事是<img />这个inline-block元素和inline元素写在一起了。处置赏罚赏罚妄图:让img 和文字都 float起来。

引申:年夜家知道img 的align 有 text-top,middle,absmiddle啊甚么的,你可以考试考试去调剂img 和文字让他们在ie和ff下能不合,你会发现怎样调都不会让你知足。索性让img 和文字都 float起来,用margin 调剂。

13.链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时,链接里网罗的图片宽度变换,惋惜在ie6下有用,ie7、ff下有用。

14.非链接的hover状态。div:hover{} 这样的项目ie6是不认的,在ie7、ff下才有用果。

15.block化的a链接,其内套absolute层,absolute层内放置img,ie下,鼠标点击img不会有链接效果,ff、op下正常。

想不出来了,以后想到再加吧。下面的诸多效果假定你控制了其中玄妙,90%的不兼容效果不须要另起css hack的。

16.没法完全扫除的float。假定让ul下的li具有了float属性,若何clear浮动的li呢?<ul><li class=”c”></li></ul> 或许 <ul><li><div>class=”c”></div></li></ul> 或许 <ul><li></li><div>class=”c”></div></ul> 或许 <ul><li></li></ul><div>class=”c”></div> 或许上述的组合?这个效果,我没法给出解答。下面有个例子与此相关

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<style type=text/css>
.c{clear:both;overflow:hidden;+overflow:visible}
.bd{border:1px solid red}

ul.ex{list-style:none;}
ul.ex li{float:left;border:1px solid green;}
</style>
<ul class=ex>
<li>sfsdfsfdf</li>
<li>sfsdfsfdf</li>
</ul>
<div class=c></div>
<div class=bd style=margin-top:19px>sfsdfsfdf</div>

请在ie下 测试,仅仅将 margin-top:19px 改成margin-top:20px 你发现甚么了?要素:doctype必须有,ie6、ie7下margin-top:19px还好好的,margin-top:20px 就出效果了,没法诠释。。。年夜家还可以将 clear 层换不合的职位测试。

处置赏罚赏罚妄图:给ul 属性zoom:1 (给li 加zoom:1 没用)

引申:clear层应当伶仃应用。或许你为了节俭代码把clear属性直接放到下面的一个内容层,这样有用果,不只仅是ff和op下掉落去margin效果,ie下某些margin值也会掉落效
<div style=”background:red;float:left;”>dd</div>
<div style=”clear:both;margin-top:18px;background:green”>ff</div>

17.ie下overflow:hidden对其下的相对层position:absolute或许相对层position:relative有用。处置赏罚赏罚妄图:给overflow:hidden加position:relative或许position:absolute。另,ie6支持overflow-x或许overflow-y的特点,ie7、ff不支持。

18.ie6下严重的bug,float元素如没界说宽度,外部若有div界说了height或zoom:1,这个div就会占满一整行,纵然你给了宽度。float元素假定作为结构用或严重年夜的容器,都要给个宽度的。

19.ie6下的bug,相对定位的div下网罗相对定位的div,假定给内层相对定位的div高度height详细值,内层相对层将具有100%的width值,外层相对层将被撑年夜。处置赏罚赏罚妄图给内层相对层float属性。

20.ie6下的bug,<head></head>内有<base target=”_blank”/>的情形下,position:relative层下的float层内文字没法选中。这个bug迫使我修公用项目库。

21.事实来了个ff的弱点。width:100%这个器械在ie里用很便利,会向上逐层搜索width值,忽视浮动层的影响,ff下搜索至浮动层阻拦,云云,只能给中央的一切浮动层加width:100%才行,累啊。opera这点倒学乖了跟了ie。

php中文网最新课程二维码
  • 相关标签:浏览器不兼容,css
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 实例详解css3特效之3D翻牌效果
  • 深刻明确form表单中Readonly和Disabled的差异
  • 若何用CSS3和Js制造照顾式导航条
  • 实例详解CSS3制造文字流光突变特效
  • css浏览器不兼容启事剖析及处置赏罚赏罚措施第1/2页_履历交流
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    华夏棋牌ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173612)

    独孤九贱(4)_PHP视频教程

    华夏棋牌江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(169721)

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137153)

    ThinkPHP5实战之[教授修养治理系统]

    本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130452)

    PHP入门视频教程之一周学会PHP

    一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(129795)

    作者信息

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节