HTML 布局常见问题

其它博客关于bug：

http://www.cnblogs.com/li0803/archive/2009/08/22/1552094.html

 

 

1，内联元素可以包含内联元素

<span class="version"><img  class="imgs" src="images/index/version.png"/><span>版本信息:V1.2</span></span>

 

2，img，input和文字垂直方向对齐，或者行高失效（在图片元素上设置vertical-align:middle;并非图片父元素上设置）

失去line-height。<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。

 

 

3，span 右浮动折行 解决IE6 IE7 IE8(Q)中span右浮动折行问题（将右浮动的 SPAN 元素调整到所有非浮动 SPAN 元素之前。）

如需要实现如下效果：

 <div class="foot">
     <span class="version"><img  class="imgs" src="images/index/version.png"/><span>版本信息:V1.2</span></span>//右浮动提到非浮动元素前面！

     <span >Copyright © 重庆市渝中区科学技术委员会</span> //非浮动元素，需要在foot中始终居中显示
</div>

 

4,清浮动的方法：clear:both 和overflow:hidden 

<li><div class="fl">text</div><div class="fr">text</div><div class="c"></div></li>

当有float:left和float:right在一起时，一般是给后面加一个<div class="c"></div>

.c{clear:both}

当在LI等的重复利用时，这样过多的<div class="c"></div>可能不大好，

其实可以给li 直接加上clear:both;和 overflow:hidden

其实用float:left也可能代替overflow:hidden，但最好不要这样。

 

清浮动方法有三：

①固定高度

②后面加个<div class="c"></div>，循环时不要用。

③给外围的LI加上 clear:both;和 overflow:hidden

 

5,垂直外边距叠加问题

两外联元素，垂直外边距会相互叠加。两元素嵌套，外层元素不做填充等处理，内层元素外边距会消失，效果将转移到外层元素上。（子元素浮动可以解决）

 

6,绝对定位实现100%高度自适应布局

需要实现如下图布局要求：

蓝色相对于红色绝对定位，top为黄色固定高度，bottom为0；

主要用于自适应布局，或者蓝色区域需要滚动条，而固定高度区域不要滚动条.

 

7,img 下的留白，大家看这段代码有啥问题：

<div>
<img src=”" mce_src=”" />
</div>

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写

<div>
<img src=”" mce_src=”" /></div>

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。

 

8, 兼容ie7 ，ie8等浏览器最小宽度，即小于最小宽度出现左右滚动条   

    更改body 的css，注意：是body，不是html

    min-width:1000px;
    width:expression(document.body.clientWidth <= 1000? "1000px": "auto");

 

9,li 中包div， 在li 之间垂直方向上出现间距（Ie6，ie7下）

代码如下：

 

Ie6，7 下

正常应该：

 

解决方案：在Li上加 vertical-align:middle;

10，FF空元素也有高度

在做描点的时候加了一个<a name="point"></a> ，本身空元素是没有高度的，但是在FF下有默认字体最小高度

解决方案：将font-size:0清零，即<a name="point" style=“font-size:0;”></a> 

 

11，ie7下overflow：hidden 清除浮动失效！

在ie7 下，overflow：hidden 无法清楚浮动。

解决方案：将父元素设置为相对定位即可！