• 公告栏使用li标签,同时你可以使用FontAwesome以及其他HTML语法
  • FontAwesome示例
  • 我每天都自问: '如果今天是我生命的最后一天, 我还会做今天打算做的事情吗?@史蒂夫·乔布斯

DIV+CSS 常见问题及解决办法整理

电脑网络 shaobo 34次浏览 1534字 0个评论

【IE6】浮动双倍边距bug:

问题 :同时使用“float”和“margin”,则margin在IE6下实际显示为双倍。

解决:给浮动容器定义display:inline

【IE6】width和height值 = 最小值

问题:IE6不认min-height,但hight=min-height。若只设定min-height,IE6下等于没有高度;若只设定高度,IE6会自动将内容撑大。标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的。

解决:

height: auto!important; /*使其他浏览器高度自适应*/

height: 100px; /*针对IE6 最小高度*/

min-height: 100px; /*针对其他浏览器最小高度*/

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

问题:这是因为默认的行高造成的

解决:(选择一种)

①、overflow:hidden;

②、zoom:0.08;

③、line-height:1px;

【IE6】mirror margin bug

问题:当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。 padding也会出现类似问题

解决:外层元素设定border 或 设定float。

【IE6】浮动外层宽度问题

问题:float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度。

解决:float元素如果作为布局用或复杂的容器,都要给个宽度。

【IE7、FF】高度不能自适应

问题:父层div不能自适应子层div的高

原因:子层设置了浮动,而父层没有浮动

解决:(按实际情况选择一种)

①、设置父层div浮动

②、取消子层div浮动

③、在横向浮动的多个子对象后加一个空div,并 设置clear:both;

④、为父层设置:{overflow: auto; _height:1%;} 前者针对FF、IE7;后者针对IE6

【IE7、FF】横向上的撑破容器问题

问题:如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行。

解决:内容可能撑破的浮动容器需要定义width。

【All】文字本身的大小不兼容

问题:同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的。

ie下实际占高16px,下留白3px;ff 下实际占高17px,上留白1px,下留白3px;opera下就更不一样了。

解决:

给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要,在高度上我们不能容忍1px 的差异。

【All】clear层应该单独使用

问题:也许你为了节省代码把clear属性直接放到下面的一个内容层,这样有问题,不仅仅是ff和op下失去margin效果,ie下某些margin值也会失效

解决:<div class="clear"></div>放在需要清除浮动的层后面

【All】怎样才能让层显示在flash上呢?

解决:<param name="wmode" value="transparent" />

【All】怎样使一个层垂直居中于浏览器中?

解决:

<style type="text/css">

<!--

div {

position:absolute;

top:50%;

left:50%;

margin:-100px 0 0 -100px;

width:200px;

height:200px;

border:1px solid red;

}

-->

</style>

【All】单像素外框线表格

解决:

table{ border-collapse:collapse; }

td{ border:#000 solid 1px; }

后续......


喜欢 (0)

您必须 登录 才能发表评论!