在IE中使用最小宽度min-width(CSS版)
2005-12-29 16:40
211 查看
min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得,所以如果你用IE将博客园的窗口宽度缩到足够小,所有的字都变在一列中。
常见的解决方法就是用javascript或IE的expressions。
在这里我来尝试用css来解决这个问题
假设我们需要一个min-width为300px的div
第一步
<div style="border-left: 300px solid #fff;height:1px"></div>
将左边框设为300px,并且边框的颜色和页面的背景色一样,高度设为1,否则这个div就看不见了
第二步
在上面的div中,加入下面的代码
<div style="margin-left: -300px;position: relative; height:1px;"></div>
定位方式设为 relative(对象不可层叠),并把对象margin-left(左边的外补丁)设为-300px。
这样这个div就会回到原点,而不是从300px开始,
分析
因为border-left为300px,所以div最小也得有300px,间接实现了min-width的功能。
而由于margin-left为-300px且position:为relative,所以里面的文字不受border-left的影响
完整的代码如下
<div style="border: 1px solid red; width: 90%;">
<div style="border-left: 300px solid #fff;height:1px;">
<div style="margin-left: -300px;position: relative; height:1px;">
宽度 90%, 最小宽度 300px;
最小高度 300%
</div>
</div>
</div>
常见的解决方法就是用javascript或IE的expressions。
在这里我来尝试用css来解决这个问题
假设我们需要一个min-width为300px的div
第一步
<div style="border-left: 300px solid #fff;height:1px"></div>
将左边框设为300px,并且边框的颜色和页面的背景色一样,高度设为1,否则这个div就看不见了
第二步
在上面的div中,加入下面的代码
<div style="margin-left: -300px;position: relative; height:1px;"></div>
定位方式设为 relative(对象不可层叠),并把对象margin-left(左边的外补丁)设为-300px。
这样这个div就会回到原点,而不是从300px开始,
分析
因为border-left为300px,所以div最小也得有300px,间接实现了min-width的功能。
而由于margin-left为-300px且position:为relative,所以里面的文字不受border-left的影响
完整的代码如下
<div style="border: 1px solid red; width: 90%;">
<div style="border-left: 300px solid #fff;height:1px;">
<div style="margin-left: -300px;position: relative; height:1px;">
宽度 90%, 最小宽度 300px;
最小高度 300%
</div>
</div>
</div>
相关文章推荐
- 在IE中使用最小宽度min-width(CSS版)
- 学习总结--Css中最小宽度min-width和最大宽度max-width属性的使用方法
- CSS中使用expression完美设置页面最小宽度(兼容ie)
- CSS中最大宽度属性max-width和最小宽度属性min-width
- div设置宽度,实现不等比缩放,或设置最小宽度 min-width
- CSS中使用expression完美设置页面最小宽度
- css ie中最小(最大)高度(宽度) 的处理方法
- 使用CSS修改TD或TR的高度(height)或宽度(width)
- min-width最小宽度的作用介绍
- min-width,设置最小宽度
- 让IE6支持min-width最小宽度
- CSS 控制最小宽度( IE 与 Mozilla Firefox 都支持)
- min-height和min-width两个最小高度和最小宽度兼容多浏览器版本
- 让 IE6 及其以下版本支持 CSS 中 min/max-width/height 属性
- IE 6最小最大宽度与高度的写法
- textarea应使用cols和rows来控制width和height,而不应使用css
- 使用HTML+CSS实现如图布局,border-width:5px,格子大小是50px*50px,hover时 边框变成红色,需要考虑语义化。
- 使用CSS在IE6.0中限制图片宽度
- CSS Div 最小高度在IE 6 和IE 7中的兼容性问题