設計皮膚我們遇到的第一個問題就是如何居中内容,一般使用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方法失效了,
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,這種方法也會帶來版式上的問題,且聽下回分解!