CSS控制页面最大最小宽度和高度可兼容IE6版本的

CSS页面宽度设置指南：最大、最小宽度兼容性优化

为了确保网页在各种浏览器中的优雅展示，特别是针对IE6/7/8/9、Firefox以及Chrome等浏览器，我们需要对CSS中的最大和最小宽度设置进行深入。以下是几种不同情境下的样式设置方法。

设置最小宽度

为了保障内容在窄屏下的正常展示，我们为div元素设置了最小宽度。以下是兼容多浏览器的样式代码：

```css

div {

width: 100%;

min-width: 1000px;

/ 针对IE浏览器的特定写法 /

width: expression(document.body.clientWidth < 1000 ? "1000px" : "auto");

}

```

设置最大宽度

当屏幕过宽时，为了防止内容过于扩散，我们通常会给div设置最大宽度。样式代码如下：

```css

div {

width: 100%;

max-width: 1200px;

/ 针对IE浏览器的特定写法 /

width: expression(document.body.clientWidth > 1200 ? "1200px" : "auto");

}

```

同时设置最大宽度和最小宽度

在某些情况下，我们可能需要同时设置div的最大和最小宽度。考虑到各种浏览器的兼容性，样式代码如下：

```css

div {

width: 100%;

min-width: 1000px;

max-width: 1200px;

/ 针对IE浏览器的特定写法，动态计算宽度 /

width: expression(Math.max(1000, Math.min(1200, document.body.offsetWidth0.99))+"px");

}

```

设置IE6下的最小高度

对于IE6下的最小高度实现，我们可以采用以下样式：

```css

div {

min-height: 100px;

height: auto !important; / 让非IE浏览器忽略最小高度 /

height: 100px; / 为了兼容IE浏览器 /

overflow: visible; / 防止内容被裁剪 /

}

```

为了确保页面能够正确渲染，我们在JavaScript中调用`cambrian.render('body')`。这样，我们的页面就能在多种浏览器中呈现出最佳的视觉效果。