Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the writing methods of min-width and max-width compatible with IE6 or IE7, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

Most of the time, we want to set the minimum or maximum width of the container, but what if IE6 does not support the min-width and max-width properties?

First, let's take a look at the effect of the standard properties min-width and max-width:

The code is as follows:

. ie-hack {

Min-width: 100px

Max-width: 200px

}

The code is as follows:

LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL

S

(figure 1-1 normal browser)

(figure 1-2 IE6)

Hey, it doesn't seem to be the expected result.

Oh, it's block. Let's switch to inline-block:

The code is as follows:

. ie-hack {

Min-width: 100px

Max-width: 200px

Display: inline-block

}

The code is as follows:

LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL

S

(figure 2-1 normal browser)

(figure 2-2 IE6)

Oh, the width limit of the normal browser has been realized, so now let's solve the problem of IE6.

The _ width attribute, which is recognized only by IE6, is used here, and the expression expression is used to set the property value dynamically:

The code is as follows:

. ie-hack {

Min-width: 100px

Max-width: 200px

Display: inline-block

_ width: _ expression (this.offsetWidth

< 100 ? '100px' : (this.offsetWidth < 200 ? 'auto' : '200px')); } 刷新页面看看吧 哈哈，恭喜你被坑了，IE6卡死了 别问我，我也不知道原因，不过我知道解决方法，就是把第一个小于号改为大于号： 代码如下: _width: _expression(this.offsetWidth >

100? (this.offsetWidth

< 200 ? 'auto' : '200px') : '100px'); 好了，这次不会卡死了，那我们看看效果怎么样： （图3 IE6） 最小宽度有了，但最大宽度没限制住。 这是因为内容太多，自动拉伸了，毕竟不是max-width啊 那我们把超出的内容截掉看看： 代码如下: .ie-hack { min-width: 100px; max-width: 200px; display: inline-block; _width: _expression(this.offsetWidth >

100? (this.offsetWidth

< 200 ? 'auto' : '200px') : '100px'); overflow: hidden; } （图4 IE6） OK，效果达到了。 至此，你是不是认为问题都解决了？ 年轻人，图样图森破啊，IE岂是你能轻易解决的 让我们来看看还有什么问题吧，这次我们用在按钮上看看效果如何： 代码如下: （图5-1 正常浏览器 & IE6） （图5-2 IE7） Oh, no！这次IE6通过了，但是换IE7来折磨你了（真的是折磨啊，说多了都是泪。） Why？ 好像是因为IE7这时把min-width当成width设置了，解决方案还是hack： 代码如下: .ie-hack { min-width: 100px; max-width: 200px; *+min-width: auto; *+width: _expression(this.offsetWidth >

100? (this.offsetWidth

< 200 ? 'auto' : '200px') : '100px'); _width: _expression(this.offsetWidth >

100? (this.offsetWidth < 20000? 'auto':' 200px'): '100px')

Overflow: hidden

}

(figure 7 IE7)

Thank heavens! Finally, open the champagne to celebrate!

Wait, young man, all say you are too young to believe it.

If I don't remind you, you don't know how to die one day.

This time we use JS to dynamically change the content of the control to see if the width of the control will change accordingly.

The code is as follows:

LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL

S

The code is as follows:

_ window.onload = function () {

Document.getElementById ("span1") [xss_clean] = "s"

Document.getElementById ("span2") [xss_clean] = "LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL"

Document.getElementById ("btn1") .value = "s"

Document.getElementById ("btn2") .value = "LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL"

}

(figure 8-1 normal browser)

(figure 8-2 IE6 & IE7)

The effect we thought would be like that in figure 8-1, but this time IE6 and IE7 are working together to torture you.

After reading the above, do you have any further understanding of min-width and max-width writing methods that are compatible with IE6 or IE7? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.