合买大神
网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

【转载】拥有布局 IE haslayout

日期:2013-11-29  来源:攀枝花惠康网络公司

找们那知道浏览器有bug,而且Windows上的lE的bug 似乎比太年夜都浏览器都多。IE/Win的衣现与其他浏览器分歧的原因之一是,显示引擎使用一个称为结构(layout)的内部概念。因为布均?#19988;?#20010;专门针对显示引擎内部工作体例的概念,所以一般悄况下不需要体?#31471;?#21487;是,结构问题是良多IE/Win显示bug的根源,所以理解这个概念以及它若何影响CSS是有捂助的。

什么是结构

Windows 上的IE 使用结构概念来节制元素的尺寸和定位。那些称为拥有结构(have layout)的元素负责自己及其子元素的尺寸和定位。如不美观一个元旦在没有拥有结构,那么它的尺寸和位置由比来的拥有结构的祖先元素节制。

IE 显示引擎操作结构概念削减它的措置开销。在理想悄况下,所有元素都节制自己的尺寸和定位。可是,这会在IE中导致很年夜的机能问题。?#19988;裕琁E/Win 开发团队抉择只将结构应用于现实需要它的那些元素,这样就可以充实地削减机能开销。

在默认情形下拥有结构的元素搜罗:

  • body
  • 尺度模式中的 html
  • table
  • tr, td
  • img
  • hr
  • input, select, textarea, button
  • iframe, embed, object, applet
  • marquee

这会导致浮动布间的各类问题更糟的是,良多人使用IE 作为主浏览器,他们会俯误地认为这?#25856;?#27491;确的默示,在其他浏览器以分歧体例措置泞-动元素时,他们反而会这必不解.

content flow in ie and other browers

结构概念是Windows 上的I E 特有的,而且它不是CS S 属性.尽管某些CSS 属性会使元ffi拥有结构,可是在CSS 巾无法显式地设公布揭晓局.可以使用JavaScript 函数hasLayout 查看一个元亲近否拥有结构.如不美观元素拥有结构,这个函数就返回true ; 否则返回falseo hasLayout ?#19988;?#20010;只读属性,所以无法使用JavaScript 选行设置.

设宜以下CSS 属性会自动地使元亲拥有结构?

  • position: absolute
  • float: left or right
  • display: inline-block
  • width: any value
  • height: any value
  • zoom: any value (Microsoft property―doesn’t validate)
  • writing-mode: tb-rl (Microsoft property―doesn’t validate)

结构有什么效不美观?

结构是良多IElWin 显示bug 的根源。例如, 如不美观一个文本段落靠谷一个浮动元索,那么期望文本环绕这个元索。可是,在Windows 上的1E 6 和更低版本巾,如不美观段落拥有结构(例如,因为设置了高度).那么它就被限制为矩形,?#19988;?#38459;止文本国?#32856;?#21160;元素〈见图9-5).

Text float in ie and other browers

Figure Above: 期望文本环绕相邻的浮动元素,可是,在IE/Win上,如不美观文本元素拥有结构,就不会这样显示。

另-个问题涉及拥有结构的元素若何确定自己的尺,如不美观元亲的内容变得比元素自己年夜,那么期望元素流出到元素外.可是,在Windows 上的IE 6 和更低版?#23616;校?#25317;有结构的元素会销误地扩展以北梢摩内容的尺寸(见圈9-6).

Figure Above: 拥有结构的错误的扩展以北梢摩内容

这意味IE/Win中的width 现实上更像min-width. 这?#20013;形?#20063;是在IE/Win中良多浮动结构被破损的原因。当浮动框的内容错误地迫使框的宽度增添时,框对于可用空间来说太年夜了,?#19988;?#19979;降到其他浮动元素不才面.

不才一节中,我们将?#27010;?#19968;些最常见的浏览器bug. 你会注重到对于Windows 上的IE的良多修复体例都涉及经由过程设置属性迫使元素拥有结构。现实上,如不美观碰着一个IE/Wi n bug,首先应该做的工作之一就是考试考试经由过程应用轨则迫使元崇拥有结构。看看这是否可以修复问题。

如不美观希忘进一步体味IE的内部hasLayout属性,我建议阅读http://tinyurl.com/acg78上的”On Having Layout”。【我的翻译文章在这里IE Haslayout 详解

常见bug及其修复体例

最常见且最轻易发现的bug 之一是IE6和更低版?#23616;?#30340;双空白边浮动bug。顾名思义,这个Windows bug使任何浮动元素上的空白边加倍(见图9-7)。

Double-margin float bug

这个bug 很轻易修复,将元素的display 属性设置为inline 就行了.因为元素是浮动的,将display 属性设置为inline 现实上不会影响显示体例。可是,这似乎会阻止Windows 上的IE6和更低版本将所有空白地加倍。这?#19988;?#20010;很是轻易发现和修复的bug : ?#24247;?#23545;具有水平空白边的元素进行浮动时,都应该很自然地将display 属性设置为inline。

3像素文本偏移bug


p { margin-left: 200px; }

如不美观这么做,在文本和浮动元素之间就会呈现一个莫名其妙的3像素间隙。(见图9-8) 。

Figure Above: IE/Win 的双空白浮动bug示意阁

Three-pixel text jog bug

Figure Above: IE 5-6/Win 的3像素文本偏移bug示意图

CSS 开发人员最主要的手艺之一是发现常见浏览器bug的能力。经由过程体味导致这些bug 的各类元索,可以在它们造盘问题之前发现而且修复它们。

双空白边浮动bug

修复这个bug 需要双管齐下。首先,给包含文本的元素设置肆意的高度。这会迫使元素拥有结构,这在概况上会消弭文本偏移。因为Windows 上的IE6和更低版本将height作为min-height那样看待,所以设置一个小的高度并不会影响元素在这些浏览器巾的现实尺寸。可是,这会影响其他浏览器,所以要使用Holly招数对除了Windows 上的IE6 和更低版?#23616;?#22806;的所有其他浏览器潜匿这个轨则,

.myFloat { float: left; width: 200px; }

/* Hide from IE5-Mac. title="IE 6 peek-a-boo bug" src="http://adamghost.com/wp-content/uploads/2009/03/image-thumb4.png" border="0" alt="IE 6 peek-a-boo bug" width="600" height="305" />

Figure Above:IE 6的躲躲猫bug示意图

相对容器中的绝对定位

我要?#27010;?#30340;段后一个首要浏览器bug涉及相对定位容器中的绝对定位元素。在前面的章节中钠揭捉

文章来源:攀枝花惠康网络公司

惠康网络,?#19988;?#23478;专业从事攀枝花网站建设,攀枝花网?#23616;?#20316;,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大?#34892;?#22478;市,我们高效优质的网站建设服务深受用户好评。

  • 提交设计需求
    您可以通过以下联系方式提交设计需求
  • 制作周期与费用评估
    收到您的需求后,我们将对网站建设周期和费用进行评估
  • 签订服务合同
    双方确认需求后签订服务合同协议,网站建设开发正式启动
  • 网?#23616;?#20316;及修改
    约定工期内提交网站初稿,并与客户?#20302;?#20462;改
  • 完稿及验收
    完成网站开发制作并交付用户,验收合格后付款
  • 售后及维护
    根据用户需要况进行免费营销指导以及有偿网络营销及网站维护

客服?#35748;擼?img src="skin/images/tel.png" alt="tel" height="15" width="84" style="vertical-align:middle;">(谢先生)  客服QQ:1323605005  
服务邮箱:[email protected](售前咨询)  [email protected](技术部)  [email protected](售后服务)
公司地址:四川省攀枝花市
?#26102;啵?/span>617200

合买大神 3分赛车开奖查询 重庆时时彩开奖查询 勒沃库森对云达不莱梅 北京赛车开奖视频记录 福建31选7走势图带连线 热带动物园注册 拜仁慕尼黑vs弗赖堡 埃瓦尔vs马竞技 五行客服 国际米兰vs罗马结果