IE 和 FF 的相容性總讓我頭昏腦脹的orz  
打文章時看到有這兩種符號字型可以選擇,於是快樂的做了個花框
沒想到即使鎖定字型,不同瀏覽器看起來還是不一樣嘛orz

   

 

Google Chrome 5.0.375  

因為無論是網頁或flash遊戲,開啟速度都超快的,所以成為近日最愛的瀏覽器。
不過打網誌文章有點卡(功能上的問題),所以沒有用來打網誌。

複製--FF和IE的字型.png

Chrome的邊框顯示方式與火狐很像,邊框(border)會壓在底色上
然而Chrome沒有小圓點(dotted),會變成小正方形orz(可愛的感覺全沒了orz)

 

Mozilla Firefox 3.6.8

邊框仔細看是小圓點。 

複製-(2)--FF和IE的字型.png

 

Avant Browser 2010 Build 111

這個核心為IE。
很久沒用這個瀏覽器開自己網誌文章,昨天(9/7)才赫然發現字型顯示不對orz
四瓣小花變成握筆的手orz

複製-(3)--FF和IE的字型.png

上圖也可以明顯得看出 IE 邊框是在底色(底圖)之外。
平常用實線邊框(solid)或立體盒還不易看出來
像這種小圓點(dotted)、虛線(dashed)或雙線(double),底色透不透得出就差很多了@@

話說立體盒邊框也是每個瀏覽器顯示得都不同|||orz
(凹線 groovw, 凸線 ridge, 嵌入線 inset, 浮出線 outset )

 

 

 

這種相同字型,顯示卻不同的問題~ 實證派的我當然開始做試驗XD
先從Word下手。在word打出全部的Wingdings 和 Webdings 符號。(如下圖)

WORD預覽與打出來的樣子.png

就像插入符號時所看到得一樣,全部都是圖案,沒有英文和數字(即使有,也是圖案方式顯示)

 

然後貼到瀏覽器看結果XD

分成四種貼法:
  1. 純文字貼上(網誌編輯器的功能鍵)
  2. 從word複製後 直接貼上
  3. 貼上為word格式(網誌編輯器的功能鍵)
  4. 純文字貼上,再從網誌編輯器選字型

IE 實測得:法2與法3成功,其他全滅。

Wingdings 和 Webdings 全部的符號-IE.png

 

FF 實測得:法4成功,其他嗚呼哀哉。

Wingdings 和 Webdings 全部的符號-FF.png 

 

結論:因為兩種核心的顯示方式沒有交集,也就是說,用A寫法,在B就一定會亂碼
   所以這兩種符號字型根本是騙人的~碰不得嘛 = =#

 

以下是上面的測試文原文。

======================================

 

 

 純文字貼上

Wingdings













•

•







Webdings













•

•



 

 

 

 

 從word複製後 直接貼上  

Wingdings

!"#$%&'()*+,-./

0123456789:;<=>

?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]

^_`abcdefghijk

lmnopqrstuvwxyz{|}~

€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•

–—˜™š›œžŸ ¡¢£¤¥¦§¨

©ª«¬­®¯°±²³´µ·¸¹º»¼½¾¿ÀÁÂ

ÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ

×ØÙÚÛÜÝÞßàáãäåæçèéêëìíî

ïðñòóôõö÷øùúûüýþÿ

 

Webdings

!"#$%&'()*+,-./012

3456789:;<=

>?@ABCDEFGHIJKLMNOPQRSTUVWXY

Z[\]^_`abcdefghijklmnopq

rstuvwxyz{|}~€‚ƒ„…†‡ˆ

‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ

 ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ

  • ·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑ

ÒÓÔÕÖ×ØÙÚÛÜÝÞß

 

 

 貼上為word格式

Wingdings

!"#$%&'()*+,-./

0123456789:;<=>

?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]

^_`abcdefghijk

lmnopqrstuvwxyz{|}~

€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•

–—˜™š›œžŸ ¡¢£¤¥¦§¨

©ª«¬­®¯°±²³´µ·¸¹º»¼½¾¿ÀÁÂ

ÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ

×ØÙÚÛÜÝÞßàáãäåæçèéêëìíî

ïðñòóôõö÷øùúûüýþÿ

 

Webdings

!"#$%&'()*+,-./012

3456789:;<=

>?@ABCDEFGHIJKLMNOPQRSTUVWXY

Z[\]^_`abcdefghijklmnopq

rstuvwxyz{|}~€‚ƒ„…†‡ˆ

‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ

 ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ

  • ·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑ

ÒÓÔÕÖ×ØÙÚÛÜÝÞß

 

 

 純文字貼上 再選字型

Wingdings













•

•







Webdings













•

•



 

======================================

 

【2010.9.9】補

因為太不爽了,所以乾脆打開PS自己作一個邊框。
而且堅持文字要用在網誌用打的,結果連文章也要開HTML僑CSS...

<p>
<table style="width: 236px; height: 135px; background-image: url(http://pic.pimg.tw/smallwu36/9823c97c7adba84d938216705e4c89db.jpg); background-position: center top; background-repeat: no-repeat;" border="0">
<tbody>
<tr>
<td style="text-align: center; vertical-align: middle;">
<p>&nbsp;</p>
<p><strong><span style="color: #ffffff; font-size: 14pt;">第 一 集</span></strong></p>
<p><strong><span style="color: #ffffff; font-size: 14pt;">&nbsp;<br /></span></strong></p>
</td>
</tr>
</tbody>
</table>
</p>

 

結果如下。FF和IE的文字位置有點不同,不過還在可接受範圍。(我是也有想像打網誌樣式css那樣不同瀏覽器分開設定,然而會被 pixnet html 編輯器的自動修錯功能刪掉...)
反正無論如何都比「握筆的手」順眼XD

伯爵與妖精-集數底圖-結果.jpg

 

全站熱搜

小無 發表在 痞客邦 留言(1) 人氣()