一般在將div居中顯示時,使用css:
divX {margin:0 auto;}
此css在firefox下是好的,但是在ie下不起作用,網上看到原因如下:
<div id="cnbruce">margin: 0 auto 看看內容居中否</div>
如上調試結果,IE6.0是不居中的,當然解決的辦法可以是對網頁主體“<body>”聲明文本居中,即
<style>
body{text-align:center}
#cnbruce{width:500px; background-color: #ccc; margin: 0 auto}
</style>
<div id="cnbruce">margin: 0 auto 看看內容居中否(加了body文本居中)</div>
然后,單個div的CSS居中,非要扯上<body>?
于是在不采用“<body>”聲明文本居中的情況下,將DOCTYPE聲明加上,立馬有效果
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<style>
#cnbruce{width:500px; background-color: #ccc; margin: 0 auto}
</style>
<div id="cnbruce">margin: 0 auto 看看內容居中否(加了DOCTYPE聲明)</div>
其實原理都知道,就是因為用這個“懶人”的HTML調試框,懶得去輸入些忘卻的東西,到頭來還以為真相就是如此呢。。。
同樣,關于“一邊固定,一邊自動擴展”的例子,加與不加在IE效果完全不同。
如下是不加的情況:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>CSS布局</title>
<style type=”text/css”>
<!–
body {margin:0;}
#dv1 {background-color: #3399FF;float: left;width: 280px;}
#dv2 {background-color: #FFCC00;width:100%;}
–>
</style>
</head>
<body>
<div id=”dv1″>
<pre>#dv1 {background-color: #3399FF;float: left;width: 280px;} </pre>
</div>
<div id=”dv2″>
<pre>#dv2 {background-color: #FFCC00;width:100%;}</pre>
</div>
</body>
</html>
如下是添加了DOCTYPE聲明
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>CSS布局1</title>
<style type=”text/css”>
<!–
body {margin:0;}
#dv1 {background-color: #3399FF;float: left;width: 280px;}
#dv2 {background-color: #FFCC00;width:100%;}
新聞熱點
疑難解答