CSS布局问题研究若干

防止插入图片过大撑大容器/IE6设定容器min-height方法:

可以把一个<div> 放到 <body> 标签下,然后为div指定一个类, 然后CSS这样设计:    #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );} 选择器定位到img时,可以控制img 的大小

DIV浮动IE文本产生3象素的bug 

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.    #box{ float:left; width:800px;}   #left{ float:left; width:50%;}   #right{ width:50%;}   *html #left{ margin-right:-3px; //这句是关键}    <div id=”box”>   <div id=”left”></div>   <div id=”right”></div>   </div>

万能float 闭合

将以下代码加入Global CSS 中,给需要闭合的div加上 即可,屡试不爽.    /* Clear Fix */    .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }    .clearfix { display:inline-block; }    /* Hide from IE Mac */    .clearfix {display:block;}    /* End hide from IE Mac */    /* end of clearfix */    或者这样设置:.hackbox{ display:table; //将对象作为块元素级的表格显示}

IE6下图片下有空隙产生

解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.

 LI中内容超过长度后以省略号显示的方法

此方法适用与IE与OP浏览器 <style type=”text/css”> <!– li {      width:200px;      white-space:nowrap;      text-overflow:ellipsis;      -o-text-overflow:ellipsis;      overflow: hidden;      } –> </style>

为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

原文链接:,转发请注明来源!

发表评论