Sounds like hasLayout
making the same function as "new block formatting context" does.
I have known exactly what "new block formatting context" works, but I am not clear about what's hasLayout
in deep and what's his job.
What I know about "hasLayout" is:
1: hasLayout
flat was used to trigger css properties so the page would be rendered correctly.
Q: What is the "css properties" referenced here?
2: If hasLayout set to true-element is a box that is responsible for rendering itself.
Q: Is it the same with "new block formatting context"?
3: the following properties give element layout:
position:absolute;
float;
display:inline-block;
width:not auto;
height:not auto;
zoom;
writting-mode;
Q: If a element inside our shrink wrapped friends has "layout" and the width is not restrained our shrink wrap will fail, why?
Here is a link, saying something about hasLayout
, maybe it will help me to explain my problem.
More details:
html
<ul class="ofArrowLinks">
<li class="ofOpen">
<a href="#">
<span>Link01</span>
</a>
</li>
<li class="ofOpen">
<a href="#">
<span>Link02</span>
</a>
</li>
<li class="ofOpen">
<a href="#">
<span>Link03</span>
</a>
</li>
</ul>
css
.ofArrowLinks li{
float:left;
font-size:12px;
line-height:2.7;
}
.ofArrowLinks a{
display: block;
padding: 0 0 0 10px;
text-decoration:none;
height:41px;
}
.ofArrowLinks .ofOpen a{
background: url(../../common/images/tab04a.gif) no-repeat scroll left top transparent;
cursor: default;
}
.ofArrowLinks span{
font-weight:bold;
display: block;
height:30px;
padding: 0 18px 0 0;
}
.ofArrowLinks .ofOpen span{
background: url(../../common/images/tab04b.gif) no-repeat scroll right top transparent;
color: #FFFFFF;
}
IN IE6:
The reason is that i have set a height to and that are using the property displayed:block, so the width of them is to auto, never shrink wrap the content.
in other browser, what i expect to see:
This is the hasLayout's fault!!Nobody can help?? so sad.....