第1次嘗試div+css進行兩欄式頁面配置就遇到了IE的3px問題

來源:互聯網
上載者:User

<!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>
<style type="text/css">
    *{
 margin:0px;
 padding:0px;
 }
    #top-right {
 /*margin-right:-3px;*/
 width:60px;
 height:30px;
 border:20px solid #f3c3f3;
 padding:40px;
 background-color:#eee;
 float:left;
 }
    #top-left {
 width:60px;
 height:30px;
 border:20px solid #f3c3f3;
 padding:40px;
 background-color:#eee;
 }
    #content {
 width:120px;
 border:40px solid #f3c3f3;
 padding:80px;
 }
</style>
</head>
<body>
<div id="top-right">aaa</div>
<div id="top-left">aaa</div>
<div id="content">bbb</div>
</body>
</html> 

用IE瀏覽器開啟上面的網頁文檔,發現上面的左右兩個div塊並沒有緊密相鄰,而是中間有個3px的縫隙,去掉css中的那條備註陳述式,問題就解決了。

在css中加上如下的語句 :
body {
 width:360px;
 margin:0px auto;
 }

可以實現兩欄的自動置中,且不受瀏覽器改變大小的影響。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.