http://blog.163.com/chenzhenhua_007/blog/static/12849264920111943230704/
可以使用 css 属性:min-width。但是,IE 不认。Google 找到一个文章,讲解了如何纯用 css 解决这个问题。方法是配合使用 min-width 和仅 IE 认的 Dynamic Properties。
例子:
min-width:785px;
width:expression(document.body.clientWidth < 800 ? "785px" : "100%" );
这个东西真的不错,我喜欢,哈哈
高度最小值
box {
min-height:100px; /*高度最小值设置为:100px*/
height:auto !important; /*兼容FF,IE7也支持 !important标签*/
height:100px; /*兼容ie6*/
overflow:visible;
}
这段文字内容,ax /min 在ie7 + 和firfox,safari,opera浏览器下均支持,最宽值为250px
不过IE6无法认读这个属性,还好IE它支持自己 javascript的属性表达,例如:
div{width:expression_r_r_r(250+"px")} 和 div{widt:250px}在IE 的认读中都是一致的!但如果有的用户在浏览器中禁用javascript,这个写法就失败了。所以,需要换一种方法:
#mycss {
width:100%;
max-width:500px;
width:e?xpression_r_r_r(document.body.clientWidth > 500? "500px": "auto" ); }
或是:
#mycss {
max-width: 33em;
width: expression_r_r_r(document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize) ? "33em" : "auto" );
}
我们设置了容器mycss的宽度为:width:100%; 其实这是一句废话,因为DIV是块元素,默认的宽度就是父级元素的宽度。此例中div宽度,若不进行声明则等同于body的宽度。
我们设置容器的max-width为500px。这对于FF来说是有效的。而对于IE则没有作用。
面对没有效果的IE,我们应用 e?xpression_r_r_r嵌入脚本,声明了当宽度大于500px的时候,宽度就等于500px。
parseInt(document.body.currentStyle.fontSize)?"33e m":"auto" 如果这个实际宽度大于 (500/12)当前字体的尺寸,则设置页面的宽度为 33em。
同样,对于最小的宽度,和ax/min-hight,也是一样的:
最小:
#mycss {
min-width: 333px;
width: expression_r_r_r( document.body.clientWidth < 334 ? "333px" : "auto" );
}
最大高度:
#mycss {
max-height: 333px;
height: e?xpression_r_r_r( this.scrollHeight > 332 ? "333px" : "auto" )
}
最小高度:
#mycss { min-height: 333px; height: e?xpression_r_r_r( this.scrollHeight < 334 ? "333px" : "auto" );
}
另外还有一种简单的方法:
#a {height:auto !important; min-height:400px;}
这个样式可以在IE5.5,IE6,IE7以及FF,Safari等浏览器下的解决最小高度问题,最大高度就没有实践过了
分享到:
相关推荐
在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟大家分享...
本文将介绍CSS控制页面最大最小宽度和高度可兼容IE6版本的实现方法,感兴趣的朋友可以参考下
宽度 复制代码代码如下: _width:[removed]document.body.clientWidth < 300 ? “300px” : “auto”); 高度 复制代码代码如下: _height:[removed]this.scrollHeight < 200 ? “200px” : “auto”); 解释...
设置网页的最小宽度在以前或许是使用js来完成的,不过今天,在本文将为大家详细介绍下通过css是如何实现的,感兴趣的朋友不要错过
最小宽度: 复制代码代码如下:.min_width{ min-width:300px; /*sets max-width for IE */ _width:[removed]document.body.clientWidth < 300> 600 ? “600px” : “auto”);}最小高度 复制代码代码如下:.mi
昨天看到width在行内块元素中,如果设置其宽度为0,该元素标签里面的内容存在着一个最小的宽度,最小的宽度根据中文字符和英文字符又有所区别,中文字符是以每个汉字来分割,英文字符是以英文单词来分割。...
插件将最小/最大宽度的媒体查询转换为类,对于不支持媒体查询的客户端(例如IE8)很有用。 例子 /* Input example */ @media ( min-width : 768 px ) and ( max-width : 991 px ) { . foo { float : left; } } ...
min-width与max-width后面均跟具体数字+html单位 min-width:50px 最小宽度为50px max-width:50px 最大宽度为50px CSS样式结构 复制代码代码如下: div{min-width:50px} div{max-width:50px}
CSS中使用expression有ie才能识别,其把CSS属性和Javascript表达式关联起来,效果相当于min-width,即实现了兼容ie,示例如下,感兴趣的朋友可以参考下,希望对大家有所帮助
Rgx React网格系统–基于约束的响应式网格,没有CSS,也没有媒体查询。...一旦网格足够宽以适合所有单元的最小宽度,则每个网格行都将其子单元格设置为显示内联块。 内联设置后,每个单元格的宽度基于其自身mi的比例
自己遇见的一些常见的css兼容性问题。和css hack ...11. IE6中min-width 最小宽度不识别的解决办法 6 12. IE6中居中布局问题 7 13. IE6 Png图片不透明问题 7 14. 移除超级链接的虚线 7 15. 隐藏水平滚动条 7
按最小宽度和/或最大宽度对媒体查询进行排序,以升序排序(用作postcss插件css-mqpacker的排序选项值) :open_book: 请参阅以了解有关其用法和更多信息。 例子: const cssMqpacker = require ( 'css-mqpacker...
(结合 CSS 媒体查询,能够适应最大和最小的屏幕,业界称之为 响应式设计。) 弹性。在浏览器窗口变宽时,不仅布局变宽,而且所有内容元素的大小也会变化。(实现太过复杂,不多介绍。) 1.2 布局高度 多数情况下...
ASP.NET中,CheckBoxList里的选择都是自动宽度的,属性时没有设置各项宽度的设置,在IE10、遨游4极速模式及兼容模式下均可正确显示最小宽度,此样式除了用于CheckBoxList外,也可用于DIV等