CSS-bug集合之float与兼容性

让IE7飙泪的浮动兼容性问题(IE6已死)

一.浮动元素在倒数2个莫名垂直间距,在ie7以及IE7以下版本都有这一bug。

CSS-bug集合之float与兼容性_第1张图片

  代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动元素倒数2个莫名垂直间距bug(超过3浮动元素)</title>
<style type="text/css">
html, body {
    background: #fff;
    color: #333;
}

div {
    width: 100px;
}

p {
    margin-right: 1px;
}

span {
    border: 1px solid #aaa;
    float: left;
    width: 120px;
    padding: 5px;
}
</style>

</head>

<body>
<div>
    <p>
        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
    </p>
</div>
</body>
</html>
View Code

  1.1莫名的bug,该怎么解决呢?

二、浮动元素倒数2个浮动最后一个字符重复bug。IE7有此问题,重复了C。

CSS-bug集合之float与兼容性_第2张图片CSS-bug集合之float与兼容性_第3张图片

  代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动元素倒数2个浮动最后一个字符重复bug</title>
<style type="text/css">
html, body {
    background: #fff;
    color: #333;
}

div {
    width: 100px;
}

p {
    margin-right: 1px;
}

span {
    float: left;
    width: 120px;
}
</style>

</head>

<body>
<div>
    <p>
        <span>A</span>
        <span>B</span>
        <span>C</span>
    </p>
</div>
</body>
</html>
View Code

 

  2.1解决方法:

三、浮动元素楼梯排列问题。

 

四、浮动元素和元素不在同一行的问题。

  代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动与同一行的差异</title>
<style type="text/css">
html, body {
    background: #fff;
    color: #333;
}

div {
    background-color: #eee;
    border: 1px solid #bbb;
    padding: 5px;
}

span { float: right; }
</style>

</head>

<body>
<div>
    左侧标题
    <span>右浮动</span>
</div>
</body>
</html>
View Code

 

五、含clear的浮动元素包裹不正确的bug。

CSS-bug集合之float与兼容性_第4张图片

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>含clear的浮动元素包裹不正确的bug</title>
<style type="text/css">
html, body {
    background: #fff;
    color: #000;
}

div {
    padding: 5px;
    margin: 5px;
    background-color: #eee;
    border: 1px solid #bbb;
    clear: left;
    color: black;
    float: left;
}
</style>
</head>

<body>
<div>
    这个&lt;div&gt; 包含 float: left 和 clear: left. 与我们通常理解的表现一致,宽度就是文字内容的宽度。
</div>

<div>
    这个同样是一个 &lt;div&gt;, 左浮动,同时含有 clear: left  的 &lt;div&gt;. 因为这一段的文字内容很长,所以,按照我们通常的理解,这个 &lt;div&gt; 占据的长度应该有整个 body 这么长。但是,在 Internet Explorer 7 下,事与愿违。 这个具有左浮动,同时含有 clear: left 的 &lt;div&gt; 仅仅占据了部分body的内容区域宽度。---- 我是占位置的文字,我是占位置的文字,我是占位置的文字,我是占位置的文字,我是占位置的文字,我是占位置的文字,我是占位置的文字……
</div>
<div>
    这是第3个具有float: left 和 clear: left 的 &lt;div&gt; . 改变你浏览器的宽度。
</div>
</body>
</html>
View Code

   浮动具有包裹性,所以,即使div是块元素,但是,使用浮动之后,就会包裹文字。

 

参考文章:慕课网:http://www.imooc.com/video/2887  张老师

你可能感兴趣的:(float)