纯CSS实现IE6下min-height和min-width效果

min-height:

CSS的兼容性问题一直令CSSer头疼，最小高度min-height是一个非常有用的属性，在页面布局中的很多地方可以用到。在52CSS.com的一些实例布局中也有涉及。

 

　　当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果。而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。
　　声明：52CSS.com原创，转载请注意出处并加上链接。

　　min-height属性并非所有浏览器都兼容，主要问题还是出现在IE6，这个不支持标准的浏览器偏偏占据很大的用户群体，虽然IE7发布很久了，IE8正式版也快发布了，但IE6依然有着众多的用户。实在让CSSer非常无奈。

　　关于可以min-height属性参考这里：http://www.52css.com/css/c_minheight.html

　　E6对于overflow的特殊实现，给我们实现min-height提供了一个思路，所以产生了以下兼容IE6、IE7、FF浏览器的min-height写法：

 

 Example Source Code [www.52css.com]

#mrjin {
    background:#ccc;
    min-height:100px; 
    height:auto !important; 
    height:100px; 
    overflow:visible;
}

 

 

min-width:

 

 

How to Use CSS to Solve min-width Problems in Internet Explorer

By Stu Nicholls.

Introduction

The lack of support for minimum width in Internet Explorer has caused many problems for web designers. Until now, the only way to emulate min-width is to use either JavaScript or Internet Explorer expressions (indirect JavaScript). After many hours of experimenting, I've found a CSS only answer. My method requires additional divs to control the width and min-width but I believe this is a small price to pay for a non-JavaScript method that works cross-browser (even on Mac IE5).

Method

The basic idea is to feed browsers that understand min-width the normal method (as follows) and to also feed Internet Explorer it's own special styling (which I'll explain in the following tutorial).

The CSS

body {background:#fff url(rule.gif) 20px 0;color:#000;font-family:"trebuchet ms", "times new roman", times, serif;margin:20px;padding:0;}.width {width:50%;min-width:300px;background:#fff;}.content {border:1px solid #c00;padding:5px;}.rule {width:300px;background:#c00;color:#fff;margin:1em 0;}

body - general body styling

• background: #fff url(rule.gif) 20px 0; - shows the background grid (10 pixel and 100 pixel marks).
• color: #000; - sets the font color to black.
• font-family: "trebuchet ms", "times new roman", times, serif; - sets up the font choice.
• margin: 20px; - sets the margin to 20 pixels.
• padding: 0; - sets the padding to zero.

.width - the outer div that controls the width and min-width for browsers that understand this (or just the width for Internet Explorer).

• width: 50%; - the preferred width.
• min-width: 300px; - the minimum width allowed.
• background: #fff; - sets the background color to white.

.content - The container for the content in which you can add a border and/or padding while not affecting the width and min-width.

• border: 1px solid #c00; - adds a red 1 pixel solid border.
• padding: 5px; - sets the padding to 5 pixels.

.rule - Includes a rule line to show when min-width has been reached.

• width: 300px; - sets the width to 300 pixels.
• background: #c00; - makes the background dark red.
• color: #fff; - makes the text color white.
• margin: 1em 0; - adds a top and bottom margin of 1em.

The (X)HTML

<div class="width">  <div class="content">    <h2>{width:50%; min-width:300px;} for non IE browsers</h2>    <p>This div has a min-width of 300px and a width of 50%.<br />    The width can be any percentage and the min-width a px or em value.</p>  </div></div><div class="rule">this is 300px wide</div>

‡ Normal method demo 1

If you try the above example in any browser except Internet Explorer and resize your window, the outer container will shrink until it reaches the minimum width of 300 pixels and then it will remain at this fixed width.

In contrast, if you try this in Internet Explorer, the container will continue to shrinking beyond the 300 pixel mark and will only stop when the text will not allow it to shrink further.

For Internet Explorer only

The following steps will show how to make Internet Explorer fall into line with the conforming browsers.

Step 1

The general idea is to use a div with a left border width set to the same value as the minimum width. The theory is that borders of divs will not normally shrink once the body of the div has reached zero width.

To make sure that all other browsers will ignore this extra styling we will target Internet Explorer using the normal hack of preceding the style with '* html'.

We'll add this extra div with the class .minwidth

The CSS

* html .minwidth {border-left:300px solid #800;}

• border-left:300px solid #800; - sets the left border to 300 pixel solid dark red so that it can be seen.

The (X)HTML

<div class="width">  <div class="minwidth">    <div class="content">      <h2>{width:50%; min-width:300px;} for non IE browsers</h2>      <p>This div has a min-width of 300px and a width of 50%.<br />      The width can be any percentage and the min-width a px or em value.</p>    </div>  </div></div><div class="rule">this is 300px wide</div>

‡ Step 1

All these steps will only be visible in Internet Explorer; other browsers will continue to see min-width correctly implemented.

The above example shows the left dark red border set at 300 pixels wide and the text to the right on a white background. Reducing the width of the browsers window will shrink the text width to a minimum but will not shrink the border.

Step 2

We now need to move the text left by 300 pixels so that it occupies the border width as well as the normal width. This can be done by adding another div with a left margin set to -300 pixels.

The CSS

* html .container {margin-left:-300px;}

• margin-left:-300px; - set the left margin to -300 pixel so that the contents will move over the border area.