IE678笑話

木曜日
28th 1月, 2010
QR Code of the URL

皮蛋黃 HTML/XHTML 0 Comment

原本打算開工寫theme, 怎料開了IETester v0.4.2內的IE6, IE7, IE8來一看, 笑了出來~

昨天裝了plugin以便在post內顯示codes (WP-SynHighlight), 但在IE6, 7, 8中, 竟然是三個不同的樣子@@”哈哈~

IE7的WP-SynHighlight

IE6的WP-SynHighlight

IE7的WP-SynHighlight

IE7的WP-SynHighlight

IE7的WP-SynHighlight

IE7的WP-SynHighlight


IE6

同一行而過長的code會自動斷行,
高度不固定, 隨行數而變高

(不定高度, 不可能出現scroll bar)

IE7

過長的code也懂得自動斷行,
但固定了最大高度, 內容太多的話會出現scroll bar

(不定高度, 但有最大高度, 只可能出現垂直的scroll bar)

IE8

過長的code不會自動斷行, 會出現橫向scroll bar,
高度則是固定的, 無視內視多少. 太多則出現scroll bar

(固定高度, 橫向垂直scroll bar都有可能出現)

話說, 其他browser又有少許不同XD”不過就不再截圖了…應該大概能想像到XD”

Chrome 3, Firefox 3.5, Opera 10

最神秘的, 就是這三者的顯示是一樣的, 但更IE6, 7, 8都不同XD”
究竟誰對誰錯, 我就不知道了=v=”

但其實大致跟IE7和IE8差不多~
跟IE7相比的話, IE7不會出現橫向scroll bar, 但這三者會~(即前者會自動斷行, 但後三者不會)
跟IE8相比的話, IE8固定了高度, 但Chrome & Firefox & Opera則類似IE7般只有最大高度.

我到真正開工時會不會真的用齊IE6, IE7, IE8, Chrome 3, Firefox 3.5, Opera 10來作測試? 不會XD”
話說如果我的Ubuntu如果是用virtual box裝在Win 7內的話, 還會再多些測試呢~哈哈~
不過大多數時間我只會用IE8, Chrome (自己常用中XD”)
間唔中才會用IE7, Firefox之類的看看~(有問題時怎算? trade off是沒辦法的了XD”)

話說這次theme的主體是HTML 5 (主體不是設計上的東西嗎=o=||?)
所以可能會用多些Opera~^^

中標準毒…rel

金曜日
8th 1月, 2010
QR Code of the URL

皮蛋黃 HTML/XHTML 0 Comment

又在著眼於細微之處了~

話說面對《論盡蛋》這個完成不了的CMS, 總喜愛在細微的地方打轉. 這次是a tag的rel attribute.

嗯, 它是跟rev一對的, 但由於不在我打算討論的範圍, 所以請大家無視它XD”

這次想說的是GreyBox, Lightbox之類的Javascript library用了rel attribute來指明那些圖片要附加特效, 那些不用. 然而, 總覺得這是不合語意的做法. rel用的場合是, 說明href指向的url跟本頁的關係, 這段關係可能是friend, home, start, next, ……但gb_pageset[group1]會是一段合適的關係嗎?

但這也不要緊了, 我也不一樣用了<ruby></ruby>之類的XHTML 1.0 Transitional內不包含的tags嗎?

然而, 中毒的我, 卻仍想保留greybox的同時, 使用正確的rel~於是, 一輪翻查, 發現rel可以使用多個值的, 只要以空格分開即可~

但故事還未完結, 我把原本的rel="gb_pageset[g1]"改成了rel="home gb_pageset[g1]"後, greybox果然運作不能!!然後, 靈機一動, 改成rel="gb_pageset[g1] home", 就沒問題了~

所以, 總結一下廢話:

  1. rel attribute是可以同時有多個值的 (eg. 同時用home me start), 只要以空格隔開各值即可.
  2. 要greybox正確運作, 必需先寫greybox的rel, 然後是其他的(eg. rel="gb_pageset[group] home me start").

ps. 我所測試的greybox是Wordpress plugin “GreyBox Integrator” version 1.0.

HTML Doctype

水曜日
29th 7月, 2009
QR Code of the URL

皮蛋黃 HTML/XHTML 0 Comment

HTML 4.01 Strict

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="zh">

HTML 4.01 Transitional

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html lang="zh">

XHTML 1.0 Strict

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html lang="zh" xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh">

XHTML 1.0 Transitional

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">

XHTML 1.0 Frameset

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  2. <html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">

XHTML Mobile 1.0

  1. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  2. <html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">

XHTML 1.1

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">

要留意的是, 以上各項的語言皆設成中文(zh). 所以如果你的是日文(ja), 英文(en), 法文(fr) 等其他語言的話, 所把lang="zh"和xml:lang="zh"中的zh改成適當的ISO Language Code, 即那些2個英文字母組成, 代表語言的編碼. 可到W3School的HTML ISO Language Code Reference作參考.