How to automatically contract the content of block-level elements in IE6

I recently developed the prompt layer component and encountered a common bug in IE6... I have come up with several solutions. This is very interesting. I will share it with you here.

In IE6 browser, display: inline-block can only trigger the haslayout attribute of IE so that the element has a layout attribute. When the display: inline-block is used for div elements, the div element still occupies a row for the block layout.

In IE6, how does one automatically contract the content of block-level elements? Develop the corner tip layer module to answer this question.

Structure and style:

Copy to ClipboardReference: [www.bkjia.com]/**
* @ Name: prompt
* @ Explain: Specifies the corner tip layer.
* @ Type: base class
* @ Dependent: None
* @ Author: peunzhang
* @ Version: 2012.9.6
* @ Html:
<! -- Corner tip layer [[-->
<Div class = "prompt">
<Span class = "ico-layer-arrow-up"> <! -- Upper indicator icon --> </span>
<A href = "#" class = "ico-close-gold" title = "close"> close </a>
<Div class = "prompt-main">
<Div class = "prompt-cnt"> <a href = "#"> input content here </a> </div>
</Div>
</Div>
<! -- Corner tip layer] -->
*/
. Ico-layer-arrow-up,. prompt-main,. prompt-cnt,. ico-close-gold {display: inline-block; background: url (https://img.tenpay.com/res/wallet_v2/global/img/global.png? V = 20120913) no-repeat; _ background: url (https://img.tenpay.com/res/wallet_v2/global/img/global_png8.png? V = 20120913) no-repeat; vertical-align: middle; overflow: hidden ;}
. Prompt {position: absolute; padding: 5px; font-size: 12px; line-height: 12px; font-family: \ 5B8B \ 4F53 ;}
. Prompt. ico-layer-arrow-up {position: absolute; top: 0; left: 12px; background-position:-41px-27px ;}
. Prompt. prompt-main {padding-left: 7px; height: 20px; background-position:-150px-501px ;}
. Prompt. prompt-cnt {padding-right: 18px; height: 20px; line-height: 20px; line-height: 21px \ 9; white-space: nowrap; vertical-align: top; background-position: right-501px; color: #7C6103; white-space: nowrap ;}
. Prompt. prompt-cnt a {color: #7C6103 ;}
. Prompt. prompt-cnt a: hover {color: # 0099FF ;}
. Prompt. ico-close-gold {position: absolute; top: 12px; right: 12px ;}

One corner of Sprite:

Open the IE 6 browser, as shown below, and the width cannot be automatically reduced (the browser window width is reduced to PX)

After Continuous testing, the following three methods can be used to solve the bug:

Solution 1: Replace the div element with the span element, and set the display: inline-block for the span element to the row block layout, which has the effect of automatic contraction.

Copy to ClipboardReference: [www.bkjia.com] <div class = "prompt">
<Span class = "ico-layer-arrow-up"> <! -- Upper indicator icon --> </span>
<A href = "#" class = "ico-close-gold" title = "close"> close </a>
<Span class = "prompt-main">
<Span class = "prompt-cnt"> <a href = "#"> input content here </a> </span>
</Span>
</Div>

Solution 2: for Internet Explorer 6, set the width of the div element on the outermost layer: _ width: 1%, so that the width of the outermost layer is automatically reduced.

.prompt{_width:1%}

Solution 3: For IE6 browsers, trigger the haslayout attribute of block-level elements and set display: inline to make the block-level attributes display the row Block Layout mode. For details, see "display: IE element under inline-block

.prompt-main,.prompt-cnt{_zoom:1;_display:inline;}

After the module is developed, the content is automatically reduced and the best usage method is selected based on the actual scenario. The first scheme is adopted here. The advantage is that no hack is written, and the disadvantage is poor scalability.

Source: http://PeunZhang.cnblogs.com/