關(guān)于clearBoth在GOOGLE Chrome中的問題解決方法

2024-07-11 08:35:41

字體：大中小

供稿：網(wǎng)友

下面這段CSS在IE中好好的，但在GOOGLE Chrome中總是不行，我調(diào)測了無數(shù)次。問題就出在 clearBoth 這個樣式上，本來這個樣式是做為換行用的清除DIV浮動狀態(tài)的樣式，在IE7中正常，但在GOOGLE Chrome卻空出很大一塊，不知道是什么原因？
代碼如下：

<html>
<head>
<style>
.userInfo
{
width: 430px;
height: 300px;
border: 1px solid #eee;
float: left;
}
.chartPanel
{
border: 1px solid #eee;
height: 300px;
margin: 0 0 0 440px;
}
.clearBoth
{
clear: both;
}
</style>
</head>
<body>
<div class=”userInfo”>
</div>
<div class=”chartPanel”>
<div style=”float: left;”>
sasadf</div>
<div class=”clearBoth”>
</div>
<div style=”float: left;”>
sasabbbbbbbbbbbbbbbbbbbbbdf</div>
</div>
<div class=”clearBoth”>
</div>
<div class=”userInfo”>
</div>
<div class=”chartPanel”>
<div style=”float: left; height: 40px; background: red;”>
aaa</div>
<div style=”float: left; height: 40px; background: blue;”>
bbbbbbbbbbbbb</div>
<div class=”clearBoth”>
</div>
<div style=”float: left; height: 40px; background: yellow;”>
aaa</div>
<div style=”float: left; height: 40px; background: green;”>
bbbbbbbbbbbbb</div>
</div>
</body>
</html>

如下的樣式：

.chartPanel
{
border: 1px solid #eee;
height: 300px;
margin: 0 0 0 440px;
float:left;
}

上面的樣式加上float:left;就可以解決這個問題，但需要請調(diào)整margin的數(shù)值到所需要的值，它是以它左邊的那個userinfo為參考點，多個元素在一行應(yīng)該都要定義float排列在一行，同一行的那兩個div應(yīng)該用一個大的div包起來，還有就是如果要換行，直接對需要換行的元素定義clear:both;就好了，沒必要加一個
這樣的元素在那，有時候我們加這個元素是為撐開兼容才用的。
詳解代碼如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<style type=”text/css”>
.userInfo
{
width: 430px;
height: 300px;
border: 1px solid #eee;
position:absolute;
left:0;
top:0;
}
.chartPanel
{
border: 1px solid #eee;