CSS_解决IE6中min-width问题

IE6中的min-width无效,而实际上,这是一个很好很有用的属性.

怎么解决呢?

参考资料中的方法其实也很麻烦,需要添加两个空div标签.

一个是设置一个大的边框宽度[ border-left: 300px solid #fff; ]

,再使用相对定位与浮动负值(等于边框宽度的值), [ margin-left: -300px;position: relative; ]

并且要使之拥有布局 [ height: 1px; ]

第二个方法差不多,不过是使用补白 [ padding-left: 300px; ]

代码如下:

view plaincopy to clipboardprint?


a
body {
background: #eee url(rule.gif) 50% 0;
color: #000;
font-family: "trebuchet ms", "times new roman", times, serif;
text-align: center;
margin: 20px;
padding: 0;
}
.width {
width: 50%;
min-width: 300px;
margin: 0 auto;
text-align: left;
background-color: #fff;
}
* html .minwidth {
border-left: 300px solid #fff;
}
* html .container {
margin-left: -300px;
position: relative;
}
/*/*/
* html .minwidth, * html .container, * html .content {
height: 1px;
}
/*/
.width {
display: inline-block;
}
/**/

.content {
border: 1px solid #c00;
padding: 5px;
}

.rule {
width: 300px;
background-color: #c00;
color: #fff;
margin: 1em auto;
}

.width1 {
width: 50%;
min-width: 300px;
margin: 0 auto;
text-align: left;
}
* html .minwidth1 {
padding-left: 300px;
}
/*/*/
* html .minwidth1, * html .layout {
height: 1px;
}
/**/

Step 8

{width:50%; min-width:300px;} includes IE5+

This div has a min-width of 300px and a width of 50%.
The width can be any percentage and the min-width a px or em value.

this is 300px wide

Transparent version:

{width:50%; min-width:300px;} includes IE5+

This div has a min-width of 300px and a width of 50%.
The width can be any percentage and the min-width a px or em value.

this is 300px wide