浏览器兼容性经典问题（三） IE6 不支持min-width属性

最新推荐文章于 2019-12-20 17:39:34 发布

speed_feng

最新推荐文章于 2019-12-20 17:39:34 发布

阅读量2.2k

点赞数 1

分类专栏： web前端文章标签： min-width web前端

本文链接：https://blog.csdn.net/speed_feng/article/details/8212041

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

问题描述：

min-width的使用在流式布局（fluid layout）中是非常常见的，当用户在改变窗口大小的时候，网页内容会随之移动，直到窗口的大小确定位置。这个时候，min-属性变起作用了。可以通过限制min-属性，让页面产生滚动条，进而控制网页内容的位置。

但是非常遗憾的是，在IE6中，并不支持min-属性，需要通过一些特定的办法去解决这个问题。

在chrome firefox safari 和IE7+中，这个属性已经被支持了，可以直接使用。

问题代码：

<html>
    <head>
         <style>
               body{
                    margin:0px;
                    padding:0px;
               }
               #box{
                    background:#ccc;
                    min-width:500px;
               }
         </style>
    </head>

    <body>
          <div id="box">
           ---------内容--------
          </div>
    </body>
</html>

浏览器显示效果(左边chrome 中间firefox 右边IE6)：

从上面的浏览器效果图中可以看到，当窗口的宽度降到了500px以下，chrome和firefox浏览器下面产生了横向的滚动条，但是IE6却没有。下面我们就针对IE6来解决这个问题。

解决方法1：
使用IE（5-7）才支持的expression()表达式，可以很简单的解决这个问题，但是这种方法是不符合W3C标准的。

实现代码1：

<html>
    <head>
         <style>
               body{
                    margin:0px;
                    padding:0px;
               }
               #box{
                    background:#ccc;
                    min-width:500px;
                    _width:expression(document.body.clientWidth<501 ? "500px" :"auto"); /*添加上这一句便可*/
               }
         </style>
    </head>
    <body>
          <div id="box">
           ---------内容--------
          </div>
    </body>
</html>

代码解释：

只需要在指定的<div>中加上代码：_width:expression(width:expression(document.body.cilentWidth<501 ? "500px" :"auto");

由于只需要在IE6下进行一些改变，所以加上"_"符号，当浏览器窗口宽度小于501px时，div宽度指定为500px，大于等于501px是，自动。

此处要注意的是：如果写document.body.clientWidth<500会导致IE6奔溃，（两处的大小相等会产生奔溃），所以此处用501或者502,；该<div id="box">不能指定margin或者padding，或者也会造成IE6奔溃。

解决方法2：

在<div id=box><div>中嵌套一个指定宽度的height：1px的<div>

实现代码2：

<html>
    <head>
         <style>
               body{
                    margin:0px;
                    padding:0px;
               }
               #box{
                    background:#ccc;
                    min-width:500px;
               }
                .min-width-box{
                    width:500px;
                    font-size:0px;            /*为空的div设置改css属性*/
               }
         </style>
    </head>
    <body>
          <div id="box">
           <div class="min-width-box"></div>   
           ---------内容--------
          </div>
    </body>
</html>

代码解释：

        在要指定min-width的div（box）中添加一个空的div（min-width-box）。对这个空的div进行css样式设置，宽度为需要设置的min-width；即width:500px;

        由于在IE6下面,<div class="min-width-box"></div>是嵌套在<div id="box"></div>下面的，所以他的高度会和“------内容------”这个的字体大小有关，为了不设置高度，把他的font-size:0px 设置为0px即可。有一些教程上用height:1px而没有使用font-size，经过验证，他的演示效果是会改变的。

浏览器的效果图：（左边chrome  中间firefox  右边IE6）

上面两种方法是实现的效果是一样的