[請益] div切版在ie無法正常顯示

看板Web_Design作者 (JJJ)時間12年前 (2011/07/14 11:40), 編輯推噓1(1012)
留言13則, 3人參與, 最新討論串1/1
我用網路上找到的div切版範例,再加上一些修改,用chrome看沒問題, 可是用ie看的話,原本分開的導覽列、內容區和頁尾又都黏在一起了 我把他們的top 單位換%、px都沒用,加了!important還是無效 可以請問到底該怎麼改才能打敗ie大魔王嗎? 以下是CSS部分的程式碼: -------------------------------------------------------------------------- <link type="text/css" href="menu.css" rel="stylesheet" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="menu.js"></script> <style type="text/css"> * { margin:0; padding:0; } /*---- 外層 ----*/ #WRAPPER { width: 80%; height: 80%; margin-top: 1px; margin-right: auto; margin-bottom: 1px; margin-left: auto; padding-top: 1px; padding-right: 10px; padding-bottom: 1px; padding-left: 10px; } /*---- 上橫幅 ----*/ #HEADER { margin:auto; background-color: #FFFFFF; } #HEADER h1 a { text-indent: -9999px; display: block; width: 800px; height: 200px; } /*---- 主選單 ----*/ div#menu { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: #666 1px 2px 5px; -moz-box-shadow: #666 1px 2px 5px; box-shadow: #666 1px 2px 5px; behavior: url(PIE.htc); margin:auto; top:1%; width:80%; background:transparent url(images/header_bg.gif) repeat-x 0 0; position: relative; } /*---- 內容區 ----*/ #CONTENT h2, #CONTENT h4, #CONTENT p { padding:6px 20px 6px 20px; font-size:12px; } #CONTENT h2 { font-family: Arial; font-size: 24px; text-align: center; padding-top: 10px; background-color:#666; color:#FFF; letter-spacing:10px; border-top:2px #999 solid; } #CONTENT { margin:auto; clear: both; border: 1px solid #696; padding: 60px 0; text-align: center; width: 80%; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: #666 1px 2px 5px; -moz-box-shadow: #666 1px 2px 5px; box-shadow: #666 1px 2px 5px; background: #CCEFEE; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#CCEFEE), to(#395BD5)); background: -webkit-linear-gradient(#CCEFEE, #395BD5); background: -moz-linear-gradient(#CCEFEE, #395BD5); background: -ms-linear-gradient(#CCEFEE, #395BD5); background: -o-linear-gradient(#CCEFEE, #395BD5); background: linear-gradient(#CCEFEE, #395BD5); -pie-background: linear-gradient(#CCEFEE, #395BD5); behavior: url(PIE.htc); position: relative; top: 2%; } /*---- 頁尾 ----*/ #FOOTER { top: 3%; border: 1px solid #666; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: #666 1px 2px 5px; -moz-box-shadow: #666 1px 2px 5px; box-shadow: #666 1px 2px 5px; behavior: url(PIE.htc); margin:auto; background-color: #000000; position: relative; width: 80%; margin-top: 10 px; } #FOOTER h2, #FOOTER p { font-size: 12px; padding:5px 20px; font-family: Arial; color: #FFFFFF; } .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } </style> ----------------------------------------------------------------------------- 拜託各位了!!不知道這樣資訊夠不夠,還是要把完整的網頁都貼出來 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.119.38.223

07/14 13:48, , 1F
設position的意義我實在是不明白,如果是要做每個欄位的間
07/14 13:48, 1F

07/14 13:50, , 2F
隔應該是用margin才對,當我去掉定位改用margin,IE、FF和
07/14 13:50, 2F

07/14 13:51, , 3F
Chrome看來都沒問題,有幾個設定蠻奇怪的,請問原始來源?
07/14 13:51, 3F

07/14 14:06, , 4F
position:relative 不是可以讓某個div欄位跟另一個的相對
07/14 14:06, 4F

07/14 14:07, , 5F
位置固定嗎? 我想說這樣我的內容增加,頁尾也會跟著往下跑
07/14 14:07, 5F

07/14 14:08, , 6F
這樣就可以不用再手動調了,還是我其實理解錯了="=
07/14 14:08, 6F

07/14 15:46, , 7F
據我的認知在子元素需要絕對定位時才會在父元素設相對定位
07/14 15:46, 7F

07/14 15:54, , 8F

07/14 15:58, , 9F
嗯... 有點不太懂,假設我要讓footer固定在content下10px的
07/14 15:58, 9F

07/14 15:58, , 10F
話,這樣寫法不可以嗎?
07/14 15:58, 10F

07/14 15:59, , 11F
裡面我是打算用3%
07/14 15:59, 11F

07/22 12:34, , 12F
position不要亂加 用margin就好 有些地方寫太複雜了
07/22 12:34, 12F

07/22 12:35, , 13F
至於ie 就用ie hack去處理吧
07/22 12:35, 13F
文章代碼(AID): #1E7cKn0w (Web_Design)