15

I've read some article on it but didn't get what is actually. can anyone on SO explain me.

Is it only related to IE6 only?

What does zoom:1?

Is layout is a IE only TAG?

Edit:

I found this info very informative for me

Because Internet Explorer is so old (as it was one of the first browsers available), it hasn’t had the luxury of starting anew as current browser do. So as time went by, Microsoft began adapting new engines to make use of CSS. Seems fine… However, CSS changes the fundamental assumption that Internet Explorer’s engine is based on – that anything significant is a rectangle that contains all its content.

So to deal with the new standards of CSS, Microsoft decided to fix their ancient engine by implementing the hasLayout property, instead of rebuilding IE. Every element in Internet Explorer now has a hasLayout property. Depending on the element, it is set to either true or false by default. If hasLayout is set to true – the element is an independent box that is responsible for rendering itself. If false – then the element relies on a parent element that has hasLayout set to true to render it. This is where a majority of IE bugs come to life.

source: http://bytesizecss.com/blog/post/fix-haslayout-with-one-line-of-css

I found one more discussion here also : http://www.molly.com/2007/03/30/back-to-work-someone-please-clearly-articulate-haslayout/

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

1 Answers1

15

It's a non-standard property on an HTML element which is only supported by IE7 and lower ( IE8 compatability mode too ), which if triggered, causes the element to be rendered in a certain way ( which can be unexpected, random, can be a godsend or can be hell ).

Classic example is giving layout to an element so it can clear floats.

#wrapper { zoom:1; }

The element will now contain floats. Any of these properties and value other than auto/normal will trigger the layout property.

* display: inline-block
* height: (any value except auto)
* float: (left or right)
* position: absolute
* width: (any value except auto)
* writing-mode: tb-rl
* zoom: (any value except normal)

Please have a thorough read @ http://reference.sitepoint.com/css/haslayout

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
  • layout means width and height? – Jitendra Vyas Nov 25 '09 at 03:07
  • ok it means haslayout is related to windows version of IE6 and 7. then what about IE8 and IE8's compatibility mode? – Jitendra Vyas Nov 25 '09 at 03:09
  • but zoom:1 is not valid css property – Jitendra Vyas Nov 25 '09 at 03:10
  • please explaing this part "specific value that's not auto/normal will trigger layout." What do you means of specific value and trigger layout? – Jitendra Vyas Nov 25 '09 at 03:14
  • 1
    1. you give an element layout by setting any of the properties listed ( those aren't all the possible ones, read http://reference.sitepoint.com/css/haslayout for reference ) 2. IE8's compatability mimics IE7 therefore `hasLayout` is on the compatability mode. 3. Right – meder omuraliev Nov 25 '09 at 03:16
  • 1
    4. For example width:auto doesnt trigger but width:1px would. – meder omuraliev Nov 25 '09 at 03:17
  • ok i got it from (any value except auto) u mean any value in px , em, % . but what is height 1% – Jitendra Vyas Nov 25 '09 at 03:17
  • Setting any of those values on the element will trigger IE's "layout" behavior. Some other rules won't behave properly in IE unless it this has been triggered. `zoom: 1` is commonly used precisely because it's not a valid CSS property, thus other browsers will ignore it. – keithjgrant Nov 25 '09 at 03:19
  • 1
    "height: (any value except auto)" - this means any value other than auto. – meder omuraliev Nov 25 '09 at 03:19
  • "Trigger layout" means IE only "layout" property will be applied. am i right? – Jitendra Vyas Nov 25 '09 at 03:20
  • "Trigger layout" means it turns the hasLayout property on. – meder omuraliev Nov 25 '09 at 03:22
  • u mean "haslayout" is IE specfic CSS property and we need to turn it on in specfic condition whenever we need? – Jitendra Vyas Nov 25 '09 at 03:24
  • 1
    We've already established that it's IE specific, let's forget about other browsers. Whenever you assign a property such as the ones specified, it turns it on whether you want to or not, sometimes in order to fix bugs you have to manually turn it on by specifying any of the properties and a specific value, so it's rendered differently. – meder omuraliev Nov 25 '09 at 03:28
  • but my question is what is actually ""haslayout" is it's a CSS property, a html tag or attributes, a javascript property? for example zoom:1 and scroll bar css are a IE specific property. – Jitendra Vyas Nov 25 '09 at 03:35
  • It's a property in the DOM/JS of IE. Certain combinations of css applied to the element set the value to be true/1. – meder omuraliev Nov 25 '09 at 03:41
  • haslayout is related to IE 6 and 7 both but mostly error comes in IE6 only. Why not in IE 7? – Jitendra Vyas Nov 25 '09 at 08:45
  • With version 7, IE started to pay more attention to matching CSS specs. It's still not perfect, and IE8 cleans it up even more, but IE7 was much better at it than IE6. – keithjgrant Nov 25 '09 at 18:30
  • width: 100% didn't help me, and neither did zoom: 1. But float: left fixed my weird IE7 placement issue. Thanks! – Ryan Oct 01 '12 at 19:16