Sealyu

          --- 博客已遷移至: http://www.sealyu.com/blog

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            618 隨筆 :: 87 文章 :: 225 評論 :: 0 Trackbacks
          一般在將div居中顯示時,使用css:
          divX {margin:0 auto;}
          此css在firefox下是好的,但是在ie下不起作用,網上看到原因如下:
          <div id="cnbruce">margin: 0 auto 看看內容居中否</div>
          如上調試結果,IE6.0是不居中的,當然解決的辦法可以是對網頁主體“<body>”聲明文本居中,即
          [ Copy ] [ Run ] [ Save ]
          <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效果完全不同
          如下是不加的情況:
          [ Copy ] [ Run ] [ Save ]
          <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聲明
          [ Copy ] [ Run ] [ Save ]
          <!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%;
          }
          -->
          </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>
          下次再也不信HTML調試框了,還是用軟件,呵呵。

          引用W3C的一些關于DOCTYPE的說明
          http://www.w3cn.org/article/step/2004/26.html
          引用
          什么是DOCTYPE
          上面這些代碼我們稱做DOCTYPE聲明。DOCTYPE是document type(文檔類型)的簡寫,用來說明你用的XHTML或者HTML是什么版本。

          其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文檔類型定義,里面包含了文檔的規則,瀏覽器就根據你定義的DTD來解釋你頁面的標識,并展現出來。

          要建立符合標準的網頁,DOCTYPE聲明是必不可少的關鍵組成部分;除非你的XHTML確定了一個正確的DOCTYPE,否則你的標識和CSS都不會生效。

          XHTML 1.0 提供了三種DTD聲明可供選擇:

          過渡的(Transitional):要求非常寬松的DTD,它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)。完整代碼如下:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          嚴格的(Strict):要求嚴格的DTD,你不能使用任何表現層的標識和屬性,例如<br>。完整代碼如下:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

          框架的(Frameset):專門針對框架頁面設計使用的DTD,如果你的頁面中包含有框架,需要采用這種DTD。完整代碼如下:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

          我們選擇什么樣的DOCTYPE
          理想情況當然是嚴格的DTD,但對于我們大多數剛接觸web標準的設計師來說,過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站,使用的也是過渡型DTD)。因為這種DTD還允許我們使用表現層的標識、元素和屬性,也比較容易通 過W3C的代碼校驗。

          注:上面說的"表現層的標識、屬性"是指那些純粹用來控制表現的tag,例如用于排版的表格、背景顏色標識等。在XHTML中標識是用來表示結構的,而不是用來實現表現形式,我們過渡的目的是最終實現數據和表現相分離。

          打個比方:人體模特換衣服。模特就好比數據,衣服則是表現形式,模特和衣服是分離的,這樣你就可以隨意換衣服。而原來HTML4中,數據和表現是混雜在一起的,要一次性換個表現形式非常困難。呵呵,有點抽象了,這個概念需要我們在應用過程中逐步領會。

          補充
          DOCTYPE聲明必須放在每一個XHTML文檔最頂部,在所有代碼和標識之上。

          posted on 2010-01-08 09:08 seal 閱讀(19286) 評論(7)  編輯  收藏 所屬分類: CSS

          評論

          # re: IE下div使用margin:0px auto不居中的原因 2010-12-10 11:34 快樂的程序員
          恩,DOCTYPE聲明必須放在每一個XHTML文檔最頂部,在所有代碼和標識之上。
          這個是很關鍵的,不然margin:0 atuo ;都不能居中!感謝!  回復  更多評論
            

          # re: IE下div使用margin:0px auto不居中的原因 2010-12-10 11:34 快樂的程序員
          不錯,DOCTYPE聲明必須放在每一個XHTML文檔最頂部,在所有代碼和標識之上。


          解決問題了  回復  更多評論
            

          # re: IE下div使用margin:0px auto不居中的原因 2010-12-10 11:34 快樂的程序員
          DOCTYPE聲明必須放在每一個XHTML文檔最頂部,在所有代碼和標識之上。


            回復  更多評論
            

          # re: IE下div使用margin:0px auto不居中的原因 2013-05-22 15:25 鋼獵
          很好的東西,頂!  回復  更多評論
            

          # re: IE下div使用margin:0px auto不居中的原因 2013-06-02 03:02 jovi
          非常實用,問題解決了  回復  更多評論
            

          # re: IE下div使用margin:0px auto不居中的原因 2015-03-19 14:44 wewq
          寫的很好  回復  更多評論
            

          # re: IE下div使用margin:0px auto不居中的原因 2015-09-12 18:02 游客
          用到了,謝謝~~  回復  更多評論
            

          主站蜘蛛池模板: 卓尼县| 永吉县| 台中县| 澄城县| 团风县| 宜城市| 海丰县| 永靖县| 临武县| 安国市| 桦南县| 大兴区| 徐水县| 江北区| 吴忠市| 凤冈县| 淮阳县| 石城县| 平阳县| 安顺市| 平阴县| 威信县| 彭阳县| 垫江县| 梁河县| 英吉沙县| 剑阁县| 浑源县| 西城区| 建平县| 久治县| 益阳市| 马公市| 皮山县| 会泽县| 兴仁县| 丘北县| 新丰县| 马尔康县| 大姚县| 马鞍山市|