haslayout_Internet Explorer的hasLayout属性

haslayout

In a perfect world, we shouldn’t need to know anything about the hasLayout property—after all, it’s an internal component of the Windows Internet Explorer rendering engine. Its effect, however, is far reaching, and has major consequences for the appearance and behavior of elements, affecting how an element bounds its content and reacts with its neighbors.

在理想情况下，我们不需要了解有关hasLayout属性的任何信息，毕竟，它是Windows Internet Explorer渲染引擎的内部组件。 但是，它的影响是深远的，并且对元素的外观和行为产生重大影响，影响元素如何限制其内容并与邻居发生React。

This topic is solely concerned with Internet Explorer for Windows.

本主题仅与Windows的Internet Explorer有关。

什么是hasLayout属性？ (What Is the hasLayout Property?)

In Internet Explorer, an element is either responsible for sizing and arranging its own contents, or relies on a parent element to size and arrange its contents.

在Internet Explorer中，元素要么负责确定其大小并安排其自身的内容，要么依赖于父元素来确定其大小并安排其内容。

In order to accommodate these two different concepts, the rendering engine makes use of a property called hasLayout that can have the values true or false for the element concerned. We say an element gains a layout or has a layout when the hasLayout property has the value true.

为了适应这两个不同的概念，渲染引擎使用了一个称为hasLayout的属性，该属性对于相关元素可以具有true或false值。 我们说，当hasLayout属性的值为true时，元素将获得布局或具有布局。

When an element has a layout, it is responsible for sizing and positioning itself and possibly any descendant elements. In simple terms, this means that the element takes more care of itself and its contents, instead of relying on an ancestor element to do all the work. Therefore, some elements will have a layout by default, though the majority do not.

当元素具有布局时，它负责调整自身和可能的后代元素的大小和位置。 简单来说，这意味着该元素会更多地照顾自己及其内容，而不是依靠祖先元素来完成所有工作。 因此，某些元素默认情况下会具有布局，尽管大多数元素没有。

Elements that are responsible for arranging their own contents will have a layout by default, and include the following (this list is not exhaustive):

默认情况下，负责安排自己的内容的元素将具有一个布局，并包括以下内容(此列表并不详尽)：

• body and html (in standards mode)
  正文和html(在标准模式下)
• table, tr, th, td
  表，tr，th，td
• img
  img
• hr
  小时
• input, button, file, select, textarea, fieldset
  输入，按钮，文件，选择，文本区域，字段集
• marquee
  选框
• frameset, frame, iframe
  框架集图框
• objects, applets, embed
  对象，小程序，嵌入

The main reasons Microsoft gives for the fact that not all elements have a layout by default are “performance and simplicity.” If all elements had a layout by default, a detrimental effect on performance and memory usage would result.

Microsoft给出默认情况下并非所有元素都具有布局这一事实的主要原因是“性能和简单性”。 如果默认情况下所有元素都具有布局，则会对性能和内存使用产生不利影响。

So why should any of us even care about the hasLayout property? Because many Internet Explorer display inconsistencies which can be attributed to this property.

那么，我们为什么还要关心hasLayout属性呢？ 因为许多Internet Explorer显示不一致，可以将其归因于此属性。

In most cases, the issues caused by elements that lack a layout are easy to spot: the content is often misplaced or completely missing. For example, when an element, such as a div, that doesn’t have a layout by default, contains floated or absolutely positioned content, it will often exhibit strange and buggy behavior. The types of strange behavior that can arise are varied, and include such behaviors as missing or misplaced content, or elements that fail to redraw fully while a window is moved or scrolled.

在大多数情况下，由缺乏布局的元素引起的问题很容易发现：内容经常放错位置或完全丢失。 例如，当默认情况下不具有布局的元素(例如div)包含浮动内容或绝对定位的内容时，它通常会表现出奇怪的错误行为。 可能发生的奇怪行为的类型是多种多样的，包括诸如内容丢失或放错位置或在移动或滚动窗口时无法完全重绘的元素之类的行为。

If you notice that a piece of your content appears and disappears, and sections of the page only get half-drawn, these are good indications that an element requires a layout. When the key element gains a layout, the problem miraculously goes away. In fact, 99% of the Internet Explorer CSS bugs you encounter on a daily basis can be fixed using a hasLayout fix in the correct place. A hasLayout fix involves nothing more than declaring a CSS property that causes an element to gain a layout, when it wouldn’t ordinarily have a layout by default.

如果您发现一部分内容出现和消失，并且页面的各个部分仅被绘制一半，则表明这些元素需要布局。 当关键要素获得布局后，问题就奇迹般地消失了。 实际上，您可以在正确的位置使用hasLayout修复程序来修复您每天遇到的99％Internet Explorer CSS错误。 hasLayout修复程序只涉及声明一个CSS属性，该属性会使元素获得布局，而默认情况下该元素通常不会具有布局。

The simplest way for an element to gain a layout is for it to have a dimensional CSS property applied—for example, a width or height. However, in situations where you don’t wish to apply a specific width or height to the element, there are several other CSS properties that, when you apply them to the element, will cause that element to gain a layout.

元素获得布局的最简单方法是为其应用尺寸CSS属性(例如， width或height 。 但是，在您不希望将特定宽度或高度应用于元素的情况下，还有其他一些CSS属性，当您将它们应用于元素时，它们会导致该元素获得布局。

Those other properties are:

这些其他属性是：

• display: inline-block
  显示：内联块
• height: (any value except auto)
  高度：(除auto以外的任何值)
• float: (left or right)
  浮动：(向左或向右)
• position: absolute
  位置：绝对
• width: (any value except auto)
  宽度：(除auto以外的任何值)
• writing-mode: tb-rl
  写入方式：tb-rl
• zoom: (any value except normal)
  缩放：(除正常值外的任何值)

Internet Explorer 7 has some additional properties that cause an element to gain a layout (this is not an exhaustive list):

Internet Explorer 7具有一些其他属性，这些属性使元素获得布局(这不是详尽的列表)：

• min-height: (any value)
  最小高度：(任何值)
• max-height: (any value except none)
  max-height ：(除无以外的任何值)
• min-width: (any value)
  最小宽度：(任何值)
• max-width: (any value except none)
  最大宽度：(除无以外的任何值)
• overflow: (any value except visible)
  溢出：(除可见之外的任何值)
• overflow-x: (any value except visible)
  溢出-x ：(除可见之外的任何值)
• overflow-y: (any value except visible)5
  溢出-y ：(除可见之外的任何值)5
• position: fixed
  位置：固定

Declaring any of these CSS properties will cause the element to gain a layout—assuming, of course, that the property is valid for the element concerned. For example, we can’t apply a height to inline elements unless the document is being run in quirks mode.

声明这些CSS属性中的任何一个都会导致该元素获得布局-当然，假设该属性对相关元素有效。 例如，除非文档以quirks模式运行，否则我们不能对内联元素应用高度。

It’s not a good idea to give all elements a layout—not just because of the performance and memory issues already mentioned, but because a number of other unwanted CSS side effects will occur. For example:

给所有元素一个布局不是一个好主意-不仅是因为已经提到了性能和内存问题，而且还因为会发生许多其他不必要CSS副作用。 例如：

Children of absolutely positioned or floated elements will not shrink to wrap their content when the child has a layout. Static content positioned next to a float will not wrap around the float, but will instead form a rectangular block to the side of the float. More examples of unwanted behavior are documented on the MSDN web site.

绝对定位或浮动元素的子级在布局时不会收缩以包装其内容。 浮动内容旁边的静态内容不会环绕浮动内容，而是会在浮动内容的侧面形成一个矩形块。 MSDN网站上记录了更多有害行为的示例。

调试hasLayout问题 (Debugging hasLayout Issues)

If you notice that your web page is behaving strangely in Internet Explorer, try setting a CSS property for an element in order to cause it to gain a layout, and see if the problem vanishes.

如果您注意到您的网页在Internet Explorer中的行为异常，请尝试为元素设置CSS属性，以使其获得布局，然后查看问题是否消失。

Some skill is involved in identifying the correct element to which the property should be applied. With experience, it can become easy to identify the culprit—it’ll usually be a parent container for which no explicit width is set, or whose width is defined by margins alone. If this parent element contains floated or absolute elements, it’s likely to be the one causing the problem; the problems are likely to exist because it’s not taking proper care of its child elements.

某些技巧涉及确定应将属性应用于的正确元素。 凭经验，可以很容易地识别出罪魁祸首-通常是一个父容器，没有为其设置显式宽度，或者其宽度仅由边距定义。 如果此父元素包含浮点或绝对元素，则很可能是导致问题的元素； 这些问题很可能存在，因为它没有适当照顾其子元素。

A useful approach to debugging layout issues is to set the proprietary CSS property zoom to 1 for elements within the document, one at time, in order to isolate the element that’s causing the problem. If you set the property on an element, and the issue is resolved, you know you’re on the right track. The zoom property is useful because, as well as being a property that triggers an element to gain a layout, in most cases, setting it will not alter the look of the page in any other way (apart from possibly fixing the bug that you’re experiencing). A process of elimination can be used to narrow the problem down quite quickly.

调试布局问题的一种有用方法是将文档中元素的专有CSS属性zoom设置为1，一次设置一个，以隔离引起问题的元素。 如果将属性设置为元素，并且问题已解决，则说明您处在正确的轨道上。 zoom属性很有用，因为在大多数情况下，设置属性并不会触发页面获取外观，该属性不会触发元素获取布局(除了可能会修复您所重新体验)。 消除过程可以用来使问题Swift缩小。

Once you have found the element that’s causing the problem, you can apply the necessary fix. The preferred approach is to set one or more dimensional CSS properties on the element. However, if dimensions can’t be applied normally, a workaround must be employed.

找到导致问题的元素后，就可以应用必要的修复程序。 首选方法是在元素上设置一个或多个维度CSS属性。 但是，如果尺寸不能正常应用，则必须采用解决方法。

For Internet Explorer 7, the best approach is to set the min-height property to 0; this technique is harmless, since 0 is the initial value for the property anyway. There’s no need to hide the property from other browsers—which is definitely not the case with our next suggestion!

对于Internet Explorer 7，最好的方法是将min-height属性设置为0；否则，默认值为0。 该技术是无害的，因为无论如何该属性的初始值为0。 无需在其他浏览器中隐藏该属性-我们的下一个建议绝对不是这种情况！

The standard approach for triggering an element to gain a layout in Internet Explorer 6 and earlier versions is to set the height property to 1%, as long as the overflow property is not set to anything except visible. This approach exploits a bug in these browser versions whereby if the overflow property is set to the default value of visible, the height of a containing box will expand to fit its contents regardless of the height property’s value. However, most other browsers will respect the height value of 1%, which is usually not what you want them to do, so this declaration will need to be hidden from all other browsers.

在Internet Explorer 6和更早版本中，触发元素获取布局的标准方法是将height属性设置为1％，只要将overflow属性设置为可见除外。 这种方法利用了这些浏览器版本中的一个错误，即如果将overflow属性设置为默认值visible，则无论height属性值如何，包含框的高度都会扩展以适合其内容。 但是，大多数其他浏览器都会遵守1％的height值，这通常不是您希望它们执行的操作，因此此声明需要在所有其他浏览器中隐藏。

In previous years, the technique of setting height to 1%, and hiding the declaration from all browsers except Internet Explorer 6 and earlier versions, was known as the Holly hack. These days, the recommended method for specifying CSS declarations for Internet Explorer only is through the use of conditional comments.

在过去的几年中，将高度设置为1％并隐藏除Internet Explorer 6和更早版本之外的所有浏览器中的声明的技术被称为Holly hack 。 如今，推荐的仅用于Internet Explorer指定CSS声明的方法是使用条件注释。

The good news is that Internet Explorer 7 is a lot more robust than previous versions, and many (though not all, unfortunately) of the issues concerning layout have disappeared—you’ll need far fewer fixes than you might have in previous versions of the browser. For more information about the layout issue, see “On Having Layout” at the Satzansatz web site.

好消息是，Internet Explorer 7比以前的版本要健壮得多，并且与布局有关的许多问题(尽管不是全部，不幸的是)已经消失了—与以前的版本相比，所需的修补程序要少得多浏览器。 有关布局问题的更多信息，请参见Satzansatz网站上的“ Onaving Layout ”。

翻译自: https://www.sitepoint.com/internet-explorer-haslayout-property/

haslayout