MozTW 討論區 https://forum.moztw.org/ |
|
一個關於CSS的問題 https://forum.moztw.org/viewtopic.php?f=13&t=14947 |
第 1 頁 (共 1 頁) |
發表人: | cmi [ 2006-07-25, 14:54 ] |
文章主題 : | 一個關於CSS的問題 |
下面兩圖是我所架設的箱庭遊戲分別以IE和火狐看的情形 火狐下的情形: ![]() IE下的情形: ![]() CSS碼如下: /*艦隊所屬表示*/ img.myFleet {padding: 1px; background-color: #043F9A;width: 30px; height: 30px;} img.campFleet {padding: 1px; background-color: lightgreen;width: 30px; height: 30px;} img.emFleet {padding: 1px; background-color: red;width: 30px; height: 30px;} 圖片的HTML碼如下: 這是有紅框的 <span class='emFleetCell'><IMG SRC="navy22.gif" class='emFleet' TITLE="(1,10) 所属不明 無人靶艦 (耐久力 4/等級 1/經驗值 0) " width=32 height=32 BORDER=0 ID='1x10'></span> 這是藍框的(跟海的顏色一樣所以看不出來) <span class='myFleetCell'><IMG SRC="navy21.gif" class='myFleet' TITLE="(1,11) Ψ新手島 Archer艦隊 護衛艦 (耐久力 3/等級 3/經驗值 39) " width=32 height=32 BORDER=0 ID='1x11'></span> 我想要的效果很簡單,在火狐下一切正常 class='myFleet'的藍框、class='emFleet'的紅框、class='campFleet'的綠框 可是一到了IE就變成上面那樣子了.... 我對CSS所知不多,不知道是哪邊出了錯 請問要如何修改才能IE和火狐有同樣的效果 也有可能是CSS其他部份影響到,完整的CSS在此 http://myweb.ncku.edu.tw/%7Eknot/cgi/cg ... Autumn.css |
發表人: | 不惑仔Boohover [ 2006-07-25, 15:30 ] |
文章主題 : | |
如果css有指定width/height,在<img>標籤的width,height屬性應該不用定義,否則會優先採用<img>裡的值。32+padding的2=34了。 其實如果只是為了在圖片上加框,太可不必如此麻煩,把css修改如下即可: 代碼: img.myFleet,img.campFleet,img.emFleet{width: 30px; height: 30px;}
img.myFleet {border:1px solid #043F9A;} img.campFleet {border:1px solid lightgreen;} img.emFleet {border:1px solid red;} 而<img>裡的width/height及border="0"拿掉就好了。 如果原來的css,有可能是在包圍span的元素在css定義了position,造成ie的背景錯誤,那就要在該元素指定一個height:1px;/*處理ie6的bug*/沒看到該頁面,所以只能猜一下了。 但是使用上面的border就不會有這種問題了。 |
發表人: | cmi [ 2006-07-25, 17:29 ] |
文章主題 : | |
謝謝不惑仔Boohover網友 使用你的CSS後無論在火狐或是IE下都是同樣的情形了 因為IMG是用程式產生的標籤,有些圖片沒有CLASS 所以我沒有改動IMG標籤中的width/height及border 還是正確顯示出我要的效果 ![]() 再次謝謝你的幫助 |
第 1 頁 (共 1 頁) | 所有顯示的時間為 UTC + 8 小時 |
Powered by phpBB® Forum Software © phpBB Group https://www.phpbb.com/ |