[译]min-width的跨浏览器兼容解决方法
Posted by Kevin | Filed under HTML/CSS/JS | 2009-01-30
项目中用到min-width,找了很多解决方案,都不管用,上蓝色经典问了些高人。版主推荐了一篇国外技术文章,觉得价值比较大,就翻译一下,收藏起来。英文比较差,如果翻译有错,还请指正。
介绍
min-width这个属性除了IE6,以及IE5.X以外的浏览器一般都支持.所以本文主要是针对IE的css hack!
对网页设计人员来说,缺乏支持的最小宽度min-width在Internet Explorer中造成了许多问题.到现在为止,唯一模拟min-width的方法是使用JavaScript或Internet Explorer的expressions语法(间接的JavaScript).经过几个小时的尝试,我发现了一个纯CSS的方法.我的方法需要额外的一些div控制宽度和最小宽度,但我相信这是一个很小的代价,一个非 JavaScript方法工程跨浏览器(甚至在Mac IE5)
方法
基本思想是为那些理解min-width的浏览器提供如下正常的方法,对IE提供他独特的风格(我会解释一下教程)
The Css
- body {
- background:#fff url(rule.gif) 20px 0;
- color:#000;
- font-family:"trebuchet ms", "times new roman", times, serif;
- margin:20px;
- padding:0;
- }
- .width {
- width:50%;
- min-width:300px;
- background:#fff;
- }
- .content {
- border:1px solid #c00;
- padding:5px;
- }
- .rule {
- width:300px;
- background:#c00;
- color:#fff;
- margin:1em 0;
- }

