December 04, 2002

[活字印刷]IE 出現橫捲軸的問題已經修好啦!

繼稍早拼命翻閱 W3 的文件,挖到 img title="foo" 就可以在游標停在 Icon 上時顯示出文字之後,又花了至少兩個小時惡補 CSS ,終於弄清楚為什麼 IE 會出現橫捲軸了。所以現在顯示應該一切正常了,真是多謝 TopStyle Pro 的幫忙啊!不然以我這個 CSS 晚輩來說,實在沒辦法快速掌握所有可能的變數。

因為我使用的 CSS Template 是從 MT default CSS template 改來的(也就是 Clean ,我唯一做的變更就是把部分字型調大一級,然後把配色直接反相而已),所以這個修正對於使用 Clean 板面配置主題的來說,也一樣有用。

也許我該 submit 回 MT ?

首先讓我們來分析一下,到底發生了甚麼事。

任何一個 CSS ID 都有好幾「層」,由外而內分別是: box, margin, border, padding, 最裡面才是內容。

在 Clean 的 CSS 裡, #content 主要是透過 position=absoulate 來讓下一個元件(就是左方的那些日曆啊、選單的)被強迫重疊在部落格的內文底下;然後又因為指定 margin-left 來設定 margin 的左邊界,所以妳會看到左邊是選單跟日曆,而右邊是部落格的內文。

然後問題來了, IE 預設會把 margin 的尺寸定成跟 box 一樣大,然後因為我們沒有改過 box 的大小,所以 margin 的寬度就會跟你「整個 IE 視窗」的寬度一致 ─ 所以無論如何都會出現橫捲軸!

所以解決的方法很簡單,就是把 margin-left 改成 left ;這樣會有以下的效果:
- 把 box 的寬度縮小(box 的左邊界向右移)
- 讓 margin 的左邊界貼到 box 的左邊界上(margin 左邊界的絕對值沒有改變)

所以對於 Opera 或 Mozilla 或 Phoenix 都不會有所影響,卻可以解決掉 IE 的顯示異常。

喔,對了,如果妳「不是」直接連到 http://jedi.org/blog/ 的話,可能還是會因為 frame 的關係而出現橫捲軸....

所發表
[創用 CC 授權條款]
IE 出現橫捲軸的問題已經修好啦!〉由 Jedi 製作,所有內容如無特別聲明,一律以創用 CC 姓名標示 3.0 台灣版授權條款釋出。
相關文章:
歷史上的今天:
迴響
[ 1 : 靜態鏈結 ]

jedi ++

由 acer 發表於 December 6, 2002 10:51 AM
[ 2 : 靜態鏈結 ]

文中#contain似乎是#content?

fauzty 發表於 March 3, 2003 12:33 AM
[ 3 : 靜態鏈結 ]

多謝指正 :D

Jedi 發表於 March 3, 2003 06:45 PM
[ 4 : 靜態鏈結 ]

position=absoulate
應該是
position: absolute

由 blizzard 發表於 July 31, 2003 11:13 PM
[ 5 : 靜態鏈結 ]
任何一個 CSS ID 都有好幾「層」,由外而內分別是: box, margin, border, padding, 最裡面才是內容。

CSS ID 應為CSS Element?

Aaron 發表於 August 1, 2003 02:18 AM
[ 6 : 靜態鏈結 ]

to blizzard:
我那是說明,不是 code 啦。雖然的確可能因此造成混淆。

to Aaron:
It is.

Jedi 發表於 August 1, 2003 06:04 AM
[ 7 : 靜態鏈結 ]

應該是BOX ELEMENT吧
基本上display設為block的元件都套用
W3C有圖說明http://www.w3.org/TR/CSS2/box.html#box-dimensions

另外IE6宣告doctype後就OK了

如果要考慮到IE6之前的IE的話
其中一個的方法就是不用width
改用margin來控制
還有另一個方法是設定width
但是padding,border,margin都設為0
裡面再多放一層box元素

由 OOO 發表於 November 4, 2003 10:55 AM
給我迴響吧!
個人資訊








是否記住個人資訊?



請依上圖輸入檢核碼:
迴響





Jedi.org: 部落格 | Weblog | 三太子 | 討論 | 網頁親和力 | 深入親和力 | 簡報原力:AV | 履歷 | @ | Flickr | tumblr | NSFW