如何成功定义容器的max-width最大宽度?_Div+CSS教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!
  
  我们首先需要了解一种坏情况的存在,主流浏览器IE对max-width是不支持的,对这一属性的设置在IE中是无效的。同样的对min-width的设置也是无效的。

  这里有一种方法,可以在IE中实现max-width最大宽度的效果,并在FF中也测试通过,我需要说明的是,这一个方法只能是max-width单独存在,也就是说,只能设置容器的最大宽度,也不能对此容器设置最小宽度,假如你想试试的话,结果只有一个,IE不知道怎么办了,程序出错!假如你有更好的办法,欢迎你来我的主页mb5u.com给我留言。

  我们是通过脚本的方法来设置max-width。我们没有写出单独的脚本代码,我们将脚本通过expression直接嵌入在CSS文件中。主是要的代码是:

示例代码 [www.mb5u.com]
  width:expression(document.body.clientWidth > 500? "500px": "auto" );

  我们看下面代码的运行效果:(改变你的浏览器的宽度以查看变化)

div css xhtml xml 代码调试框 代码调试框 [www.mb5u.com]

[ 可先修改部分代码 再运行查看效果 ]

  我们设置了容器woaicss的宽度为:width:100%; 其实这是一句废话,因为DIV是块元素,默认的宽度就是父级元素的宽度。此例中div宽度,若不进行声明则等同于body的宽度。

  我们设置容器的max-width为500px。这对于FF来说是有效的。而对于IE则没有作用。
  面对没有效果的IE,我们应用expression嵌入脚本,声明了当宽度大于500px的时候,宽度就等于500px。

  或许你认为这段代码的意义不大,只能设置最大宽度却不能设置最小宽度。试想我们追求某种效果,应用了动态布局,在页面中的某一个区域,目前的宽度在400左右,这是针对于1024*768的浏览器的。而当1600*1200宽度的用户访问的时候,这一区域的宽度达到了600左右,此时,你的布局因为此变化而不能浏览或非常难堪,此时这一效果就派上用场了。当然,还有其它的用法,这要靠细心的你去发现了,若有更好的用处,别忘了来mb5u.com发布。
  

来源:无忧整理//所属分类:Div+CSS教程/更新时间:2007-02-03
相关Div+CSS教程