如何成功定义容器的max-width最大宽度?_Div+CSS教程
教程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" );
我们看下面代码的运行效果:(改变你的浏览器的宽度以查看变化)
代码调试框 [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教程:
- 相关链接:
- 教程说明:
Div+CSS教程-如何成功定义容器的max-width最大宽度?。