設計皮膚我們遇到的第一個問題就是如何居中内容,一般使用CSS+DIV布局有兩種方法,
第一種方法是使用 auto margins,第二種方法是使用負margins
翻翻資料,使用auto margins的一般都是這麼寫的:
假設HTML部分如下:
DotNetNuke(DNN)皮膚制作--如何居中内容 <body>
DotNetNuke(DNN)皮膚制作--如何居中内容 <div id="wrapper">
DotNetNuke(DNN)皮膚制作--如何居中内容 </div>
DotNetNuke(DNN)皮膚制作--如何居中内容 </body>
現在使用auto margins居中id為wrapper的DIV,
DotNetNuke(DNN)皮膚制作--如何居中内容 #wrapper
DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容 {
DotNetNuke(DNN)皮膚制作--如何居中内容 }{
DotNetNuke(DNN)皮膚制作--如何居中内容 width: 720px;
DotNetNuke(DNN)皮膚制作--如何居中内容 margin: 0 auto;
DotNetNuke(DNN)皮膚制作--如何居中内容 }
但你卻發現,按照這種“标準”寫法,皮膚安裝到DotNetNuke中後,在IE 5.x/Win、IE 6/Win中裡面卻怎麼也沒法把内容居中,auto margins方法失效了,
這是為什麼呢?原來,IE 5.x/Win是不支援auto margins的,而DNN預設的DOCTYPE會觸發IE6進入quirks模式(
如何解決 ),這種模式下也是不支援auto margins的,看樣子這個經典居中方法是沒法用在DNN上了,幸運的是,IE錯誤的了解text-align:center這個定義,IE會把所有的東西都居中而不僅僅是text,我們可以利用這一點來解決問題。修改後的代碼如下(隻需要修改CSS部分):
DotNetNuke(DNN)皮膚制作--如何居中内容 body
DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容 text-align:center;
DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容 #wrappter
DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容 width:720px;
DotNetNuke(DNN)皮膚制作--如何居中内容
DotNetNuke(DNN)皮膚制作--如何居中内容 text-align: left;
DotNetNuke(DNN)皮膚制作--如何居中内容 修改完再試一試,在IE裡面也表現完美!
第二種方法是使用負的margin,這種方法也會帶來版式上的問題,且聽下回分解!