<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    Sealyu

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

      BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理 ::
      618 隨筆 :: 87 文章 :: 225 評論 :: 0 Trackbacks
    一般在將div居中顯示時,使用css:
    divX {margin:0 auto;}
    此css在firefox下是好的,但是在ie下不起作用,網(wǎng)上看到原因如下:
    <div id="cnbruce">margin: 0 auto 看看內(nèi)容居中否</div>
    如上調(diào)試結(jié)果,IE6.0是不居中的,當(dāng)然解決的辦法可以是對網(wǎng)頁主體“<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 看看內(nèi)容居中否(加了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 看看內(nèi)容居中否(加了DOCTYPE聲明)</div>
    其實原理都知道,就是因為用這個“懶人”的HTML調(diào)試框,懶得去輸入些忘卻的東西,到頭來還以為真相就是如此呢。。。
    同樣,關(guān)于“一邊固定,一邊自動擴展”的例子,加與不加在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調(diào)試框了,還是用軟件,呵呵。

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

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

    要建立符合標(biāo)準(zhǔn)的網(wǎng)頁,DOCTYPE聲明是必不可少的關(guān)鍵組成部分;除非你的XHTML確定了一個正確的DOCTYPE,否則你的標(biāo)識和CSS都不會生效。

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

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

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

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

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

    注:上面說的"表現(xiàn)層的標(biāo)識、屬性"是指那些純粹用來控制表現(xiàn)的tag,例如用于排版的表格、背景顏色標(biāo)識等。在XHTML中標(biāo)識是用來表示結(jié)構(gòu)的,而不是用來實現(xiàn)表現(xiàn)形式,我們過渡的目的是最終實現(xiàn)數(shù)據(jù)和表現(xiàn)相分離。

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

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

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

    評論

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

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


    解決問題了  回復(fù)  更多評論
      

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


      回復(fù)  更多評論
      

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

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

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

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

    主站蜘蛛池模板: 色天使亚洲综合一区二区| 亚洲国产成a人v在线观看| 色偷偷亚洲第一综合| 卡一卡二卡三在线入口免费| 亚洲自国产拍揄拍| 全免费a级毛片免费看无码| 国产午夜亚洲精品| 四虎成人免费网址在线| 亚洲另类无码一区二区三区| 国产女高清在线看免费观看| 亚洲中文字幕久久精品无码A | 国产精品亚洲av色欲三区| 成人免费看片又大又黄| 亚洲爆乳无码精品AAA片蜜桃| 国产麻豆剧传媒精品国产免费| 怡红院亚洲红怡院在线观看| 亚洲精品色婷婷在线影院| 久久一区二区免费播放| 亚洲av色影在线| 成视频年人黄网站免费视频| 国产成人亚洲精品| 四虎影视永久免费观看| www免费插插视频| 久久久婷婷五月亚洲97号色| a毛片基地免费全部视频| 日韩精品亚洲专区在线影视| 亚洲精品NV久久久久久久久久| 男女作爱在线播放免费网站| 亚洲午夜电影在线观看| 免费在线观看一级毛片| 亚洲视频免费在线观看| 亚洲人成综合网站7777香蕉| 亚洲精品成人久久久| 1000部啪啪毛片免费看| 日韩精品视频在线观看免费| 亚洲高清在线mv| 国产91在线免费| 91短视频在线免费观看| 老司机午夜免费视频| 亚洲性色成人av天堂| 中文字幕免费播放|