当前位置:首页 > 日记 > 正文

在专有的CSS属性haslayoutIE浏览器的深度分析

在专有的CSS属性haslayoutIE浏览器的深度分析
a.haslayout是什么
haslayout有很多相似之处的,但haslayout概念更易于理解。在互联网浏览器,元素与布局;的概念来控制的大小和位置、布局和布局已不分为两种,大小和定位元件的布局是由本身和它的元素的控制,没有布局元素将通过父元素(布局最近的祖先)控制的大小和位置,以及是否有一个元素的haslayout属性告诉浏览器的布局,它是一个布尔变量,真是布局元素,虚假的布局元素不具有代表性。总之,haslayout只有一个专有的属性在IE浏览器,和元素W随着haslayout真正赋予它一系列效应。

特别注意的是事实,haslayout被遗弃在IE 8和后来的IE版本,所以在现实的发展,有必要引起一些在IE 8浏览器元素haslayout。

对haslayout元素会影响大小和元素的触发位置,它会消耗更多的资源,所以默认的IE设计师只对haslayout元素部分(这是默认的触发元件部分将触发haslayout,和BFC完全由开发商通过特定的CSS触发器是不一样的,这部分的元)以下:

体和HTML
表,TR,TH,TD
IMG
人力资源
输入按钮,文件,选择文本,字段集
跑马灯
框架,框架,iframe
对象、小程序、嵌入

两。如何触发haslayout
除了IE的默认触发元件haslayout,Web开发人员也可以使用特定的CSS触发元件的haslayout。

通过设置以下任何CSS的元素,你可以触发haslayout(即该元素的haslayout属性设置为true)。

浮子:(左或右)
位置:绝对的
显示:内联块
宽度:(除汽车以外的任何值)
高度:(除汽车以外的任何值)
写入模式:TB
缩放:(除了正常数字以外的任何数字,包括1的效果相当于正常)
In addition, some CSS can also trigger hasLayout under IE 7.

最小宽度:(任意值包括0)
马克斯宽度:(除无任意值)
最小高度:(任意值包括0)
马克斯高度:(除无任意值外)
除可见(隐藏、自动、滚动)溢出的值。
位置:固定
对于内联元素(可以认为是默认浏览器span元素,内联元素也可以设置显示的宽度和高度:内联元素)可以触发只有在IE5和IE6或元素。X的haslayout的怪癖模式更新的版本,但对于IE6,如果浏览器的标准兼容模式运行,内联元素会忽略宽度或高度属性,所以设置宽度或高度不可为了触发haslayout元素。但变焦总是能够触发除了IE 5 haslayout。变焦是用来设置或检索元素的缩放比例。设置缩放:1元素可以触发haslayout元素没有造成不必要的影响因素。因此,考虑到浏览器对元素的影响之间的相容性,Kayo建议使用变焦:1触发元件的haslayout。

三。haslayout触发效果
虽然haslayout希望BFC影响的大小和位置的元素,但它不是一个完整的一套标准,因为只有一些元素的默认触发,这导致很多前端开发下的IE漏洞,引发haslayout更是解决一些IE漏洞,而不是利用它的一些副作用;为了达到一定的效果。另外,由于触发haslayout元素会出现一些触发BFC元素类似的效果,所以为了表达伊江元素与BFC浏览器支持统一,Kayo建议触发和触发haslayout BFC的元素,当然,也需要考虑到实际情况,可能只有其中一个可以触发为了达到团结的效果,下面将介绍。

在这里,首先,列出一些触发haslayout元素的影响:

1。防止外缘折叠

两个div是叠加在垂直的外缘,而触发的haslayout不会发生这样的元素,如下:
在上面的例子中,三个div包含一个P元素,和三个div和P元素包含顶部和底部之间的外部距离,但只有第三分利润并不折叠它的子元素P,这是因为第三DIV使用变焦的外缘:1触发haslayout并防止其折叠出其子元素的外部距离。

此外,溢流型隐藏触发元件也使用的例子,它利用BFC预防外从动件实现的统一表达伊江元素和现代浏览器。

2。可以包含一个浮动的子元素,包括浮动的子元素时的计算高度计算。

结果如下:
在上面的例子中,有两个div,每个包含一个浮动元素P,但第一个div实际上是判断浏览器,它没有高度和宽度,即高度为0,与上、下边界重叠在一起,二div使用变焦:1触发haslayout,它可以包含一个浮动元素,所以它可以正确显示的高度,和它的边缘位置是正常的。

此示例还使用溢出:隐藏触发BFC,类似的情况下,允许使用可以包含子元素特征浮动元素集成在伊江和现代浏览器。

三.背景图像显示问题

背景元素不能正确显示是一个重建最常见的问题,在IE 7及以下版本的IE,元素的高度和宽度设置不经常不能显示背景图像(背景颜色是正常的,这实际上是有关haslayout)。事实上没有元素触发haslayout不能显示背景图。如上所述,触发haslayout是元素使布局。换句话说,带有布局的元素可以正确显示背景图:
两部以上的所有设置背景图,但只有变焦的使用:1触发的haslayout二div正确显示背景图。

在这个例子中,没有BFC触发的元素,因为在现代浏览器中,元素本身没有背景图显示。

可以看出,上述第一、第二的例子,为了使元素在IE(包括IE版本低,IE的更新版本)和现代浏览器性能统一,引发haslayout和BFC,和第三个例子的问题,因为只有在低版本的IE,所以就像低版本的IE触发haslayout,这些技术需要特别注意在实际项目。

这也是说,haslayout是事实上的许多即显示相关的缺陷,很多莫名其妙的错误都是由haslayout。因此,只要适当的触发因素是haslayout,很多IE漏洞是可以解决的。Kayo在这里列出了几个例子:

IE 6和浮动元素的低版本双边距设置错误显示:内联元素可以被解决。
即5-6的3像素偏移错误设置_height:1%元可以解决的

相关文章

词的页面背景时,清除Word2010教程的

词的页面背景时,清除Word2010教程的

操作,教程,清除,背景,页面,字填写页面背景;雨后;,今天是一个常见的大学计算机考试,萧边教你在Word页面背景的技能后雨。 单词页面到后台操作步骤后的雨 单击页面布局;。 点击页面颜色选项,点击填充效果;。 在渐变选项卡上,单击预置;。 在默认的颜…

ps实例分析在减法中的应用

ps实例分析在减法中的应用

应用实例,实例分析,减法,电脑软件,ps,今天给大家分享的ps解析减法的方法,教程很基础,适合初学者学习,希望对你有所帮助! 步: 1,选择矩形盒子工具;在文档中画一个矩形; 2,选择单行盒选择工具; 3,按住Alt键;这是选区相减的快捷键,并绘制单行选择。 4。…

在HTML中详细解释字幕属性

在HTML中详细解释字幕属性

字幕,属性,解释,详细,电脑软件,这个标签是不属于html3.2,只支持msie3后核。因此,如果使用非IE内核浏览器(如Netscape),您可能不会看到以下有趣的结果。 标签是容器标签。 Grammar: 下面是最简单的例子之一: 代码如下: 你好,世界 以下两个事件经…

通过在Windows5.7.9winx64MySQL安

通过在Windows5.7.9winx64MySQL安

安装,电脑软件,winx64MySQL,当mysql5.7.9版本上安装Windows,不会有问题的启动但没有错误报告。这是因为5.7.9以上的版本将在MySQL目录缺乏数据目录。 在数据目录中存储了一些表文件,用于描述数据和结构。数据目录不能自己构建。它必须自动生…

安装MySQL5.7.17在Windows10下简单

安装MySQL5.7.17在Windows10下简单

安装,简单,笔记,电脑软件,以前Linux已经用过mysql,安装也很简单,今天,试着安装在windows下,发现里面确实有个坑。 记录安装过程是很好的。 1。首先,我们必须去MySQL官方网络下载我们需要的资源,选择下载>社区,这时你可以看到MySQL社区服务器。 …

一个键取消Excel中的多个操作

一个键取消Excel中的多个操作

操作,取消,多个,电脑软件,Excel,在连续运行,你需要返回到操作的初始状态,如果你不保持下来,显然是不必要的;如果单击开始工具栏按钮,或撤消;连续按Ctrl + z集团债券被撤回,那就更麻烦了。一个关键的撤销可以通过以下方法实现: 单击工具栏上的取消,,…

js不要求在页面跳过时跳转地址。

js不要求在页面跳过时跳转地址。

地址,跳转,跳过,页面,电脑软件,事实上,我想表达的是,JS,当window.location.href控制页面跳转,有时跳到缓存的页面,并不是真的要来跳,结果在页面数据加载失败,刷新时间。 直接进入代码… uff1a结算条款 从HTML中隐藏并从JS调用来请求链接地址 $…

用双轴图显示多组数据更为明显。

用双轴图显示多组数据更为明显。

数据,显示,多组,电脑软件,用双轴图,有时需要显示多个数据集可以在Excel图表遇到一些问题:现在的同时,销售增长率,但销售价值比较大,而增长率通常低于1,所以当两组数据出现在同一个图表,趋势增长率不能反映在图。在这一点上我们可以使用双轴图的Ex…

插画教程:制作烟雾笔刷

插画教程:制作烟雾笔刷

教程,插画,烟雾,笔刷,电脑软件,本教程告诉你用Illustrator CS4制作烟雾笔刷的过程,我希望看到你的插画水平进一步通过本教程。 先看看效果图: 1。新的文件(Ctrl + N),文件大小A3(297 * 420mm)。 2,使用矩形工具(M)绘制一个矩形,大小与绘图板的大小,并…

WPS如何使用缩放函数WPS如何使用缩

WPS如何使用缩放函数WPS如何使用缩

缩放,函数,文本,教程,如何使用,对于频繁使用WPS的人,应该知道如何使用变焦功能,但对于初学者来说,可能有点无知,让萧边告诉你如何使用变焦功能的WPS。 WPS中缩放函数的使用方法 1。打开需要使用缩放功能的WPS文档,单击工具栏的打印; 2。我们将…

MySQL的多线程复制遇到error_code:1

MySQL的多线程复制遇到error_code:1

多线程,溶液,电脑软件,MySQL,error_code,上周,我们在生产环境中遇到了一个问题。我不敢去享受它。我把它拿出来做了一个简单的朋友分享。 原因:由于IDC机房的电源故障(估计它会受到挖掘机的攻击),所有服务器都重新启动并影响MySQL数据库: MySQL…

PS图象处理软件做了个很清爽的夏天

PS图象处理软件做了个很清爽的夏天

海景,图象,清爽,处理软件,婚纱,夏季拍摄是一个不错的选择。特别是当海滩清澈,蔚蓝的天空和深蓝色的大海是一体的。带有装饰的白色非常清晰,阳光的光晕会给你最难忘的时刻。 最终效果 1。建立一个1024×填充浅蓝色背景:# a7ebf9 680像素的文件…