能触发IE hasLayout的css属性

 

以下只是部分转载，方便自己查阅，我搜到的这文章地址是：　http://haslayout.net/haslayout

 

The following properties/values give an element layout:

• position: absolute
• float: left or right
• display: inline-block
• width: any value other than auto
• height: any value other than auto
• zoom: any value other than normal (see description below)
• writing-mode: tb-rl (see description below)

As of IE version 7, few new properties give "layout":

• overflow: hidden or scroll or auto
• overflow-x: hidden or scroll or auto
• overflow-y: hidden or scroll or auto
• min-width: any value other than auto
• max-width: any value other than auto
• min-height: any value other than auto
• max-height: any value other than auto

Microsoft finally got rid of hasLayout in IE8 standards mode, even though it is still present in IE7-compatibility mode (for obvious reasons).

 

 

You may be not familiar with zoom and writing-mode properties. Both are Microsoft's proprietary extensions. They work only in IE and will not validate. Therefore, I strongly advise you to put those into condcoms. However, writing-mode property is already in the CSS3 Technical Report, zoom property may make it there one day, but to my current knowledge it hasn't yet.

 

Zoom obviously zooms an element. For example, zoom: 2 will render the element twice its size, whereaszoom: 1 will render the element with normal dimensions, and that is why I personally think this is the best property to use inside conditional comments for giving an element "layout" since it has no other effects on the element.

Writing-mode property is a proposed addition to CSS3 that determines how the text should be written. Thetb-rl value stands for "top to bottom, right to left", a typography style used in East Asia. Western typography is depicted "left to right, top to bottom", which would be lr-tb value for writing-modeproperty.

Setting display: inline-block and then reverting it back to the original display property value inside another rule set does not remove layout, this trick can be used to give layout without the use ofconditional comments when you cannot use other properties. Here is how this trick would look like:

div { display: inline-block; }
div { display: block; } /* two separate rule sets */

Properties overflow-x and overflow-y have also made it into CSS3 Technical Report, thus still might not be well supported at the moment.

Setting proprietary contenteditable attribute also gives an element "layout".

<p contenteditable="true">so lame</p>

You should never use this one for setting hasLayout, it is shown here only for informational purposes. Not only contenteditable is a proprietary MS attribute (thus it will not validate) but also allows the user to edit the content of the element, which in best case will confuse the user.

The hasLayout "property" is read-only, you cannot set it directly with JavaScript for example.