IE6 min-height dilemma

问题:

Here is my site: http://smartpeopletalkfast.co.uk/ppp/home-page.html

I want the input forms to be the same height as the buttons to their right. I've done this with a min-height value so the page would still be usable if the text size was set to greater than this height.

The problem is that IE6 doesn't recognize min-height. I could set a fixed height, but I'm worried about users resizing the text beyond this. As it's only a cosmetic issue, I'm tempted just to leave this.

Any suggestions? Thanks

回答1:

If the issue is indeed just getting min-height working in IE6, use the Min-Height Fast Hack:

selector {
    min-height:500px;
    height:auto !important;
    height:500px;
}

It's been around for a long time, so it's easily recognizable for anybody maintaining your CSS in the future.

回答2:

In Internet Explorer 6, height is treated as min-height and min-height is not supported.

So you can write a rule which targets only IE6 to fix this. Let's say that you have the following:

#navigation .nav-menu-item {
    min-height:50px;
}

In order to have the same effect in IE6 you could add a second rule which only IE6 will recognize. I tend to use the star HTML hack:

#navigation .nav-menu-item {
    min-height:50px;
}
* html #navigation .nav-menu-item { /* for IE6 */
    height:50px;
}

You can read more here.

回答3:

Allow me to offer a different approach. This is your goal, as stated:

I want the input forms to be the same height as the buttons to their right.

Plus, there is a condition of allowing for text resizing, as stated:

still be usable if the text size was set to greater than this height

Knowing that, my suggestion is to base the height on EMs. Use EMs to define the container height of the input and the button, then set the heights of the input and button to be 100%. This way, as the user resets their font size (from smallest to largest), the container will grow and shrink, and the input / button will grow and shrink with them.

I've mocked up a simple example at the following url: http://jsbin.com/oguze5/2/edit

Things will need to be changed for styling purposes, but the general idea / concept is pretty sound.

回答4:

Thanks for your post thirtydot. Ive seen that solution around but it didnt work for me, it set a fixed height non a minimum one.

Ive done it with the solution below and loaded the CSS for IE6 only for good measure. It works on the computer ive tested it on, I just hope it works for all IE6 computers:

http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/

Thanks