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
還是正確顯示出我要的效果
:D
再次謝謝你的幫助

1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/