浮动在IE6,7下的一些问题

1、首先如果两个元素要并在同一行，使用float最好两个都加浮动

2、IE6下双边距问题，当有块级元素浮动的时候，该元素的横向margin值会被放大为两倍，解决办法：给该元素加display：inline即可。

3、li的一些问题

a:如果有两列布局，我们仅仅给右边加有浮动，在IE6,7下会折行，解决办法：正如第一条建议一样，要并在同一行的元素，最好都加浮动，所以这里只要给左列的元素也加上左浮动。

b、IE6,7下LI内部的元素都浮动的话，li之间会有4px的间隙。解决办法：给li加vertical-align:top/middle.

这里乱入了一个vertical-align。索性讲讲他的作用吧。顾名思义是设置垂直对齐方式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>zwl-byself</title>
<style>
.wrap{height:200px;border:2px solid #000; text-align:center;}
.span1{ width:100px;height:200px;background:yellow; display:inline-block; vertical-align:middle;}
.span2{ width:200px;height:100px;background:blue; display:inline-block; vertical-align:middle;}
</style>
</head>
<body>
<div class="box"><span class="span1"></span><span class="span2"></span>
</div>
</body>
</html>

　　如上例，给一个元素里面的内容元素设置对齐方式，而且每一个元素都要加上vertical-align:top/middle/bottom.

4、ie6下最小高度问题，前面有用到font-size：0;来解决，但是只能解决到2px。给该元素加上overflow:hidden;更完美的解决方案。

转载于:https://www.cnblogs.com/toodeep/p/4573952.html

浮动在IE6,7下的一些问题相关推荐

一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行转载于:https://www.cnblogs.com/mabelstyle/p/3844739.html
兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position：relative属性的子元素...
IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素 <!DOCTYPE html> <html lang=" ...
IE6/IE7下：inline-block解决方案
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...
IE6/IE7下：inline-block不兼容的问题
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素 ...
IE6环境下遭遇winow.location.href=''的跳转bug
<script type="text/javascript"> function goUrl(x) { window.location.href=x; } & ...
css兼容性案例：margin-top在IE6/7下失效
又到了利用碎片学习的时间了,看看这个兼容性的小案例,前端开发者经常遇到的问题:margin-top在IE6/7下失效. 一个块级元素,触发了hasLayout(比如设置了宽度高度),并且其前面紧挨着的 ...
IE6,7下实现white-space:pre-wrap;
HTML 的空白符处理规则 HTML 中的"空白符"包括空格 (space).制表符 (tab).换行符 (CR/LF) 三种. 我们知道,在默认情况下,HTML 源码中的空白符均 ...
opacity在IE6~8下无效果，解决的办法
opacity在IE6~8下无效果,解决的办法问题出现时rgba()在ie6下不出效果,最后查到是opacity的问题. opacity是css3时出现的,目前主流浏览器都支持.but老IE是个麻烦 ...
ie6,ie7下设置overflow:auto下滚动条不起作用
今天遇到一个比较特殊的情况:ie6,ie7下设置overflow:auto下滚动条出来了但是滚动条不起任何作用,但在火狐,ie8,ie9,谷歌等浏览器下正常显示.通过查询终于找到原因,只需要加一个po ...

浮动在IE6,7下的一些问题

浮动在IE6,7下的一些问题相关推荐

最新文章

热门文章