序言:
如果你是一位網頁設計師, 并遵從W3C的網頁規格設計網頁的話, 那麼你一定很頭痛. 因為你漂亮的, 自豪的作品,
在 Internet Explorer 上運行的時候, 不是支離破碎就是慘不忍睹. 為甚麼呢? 因為Internet Explorer
在設計的時候, 沒有完全考慮到W3C國際標準的問題. 所以, 只有在firefox, Safari, Chrome 這些符合W3C
標準的瀏覽器, 你的設計才可以”抬頭做人”. 為了應付IE在顯示網頁的問題(IE Bugs), 很多設計師創造了很多
的hack(美國口語:對付的意思)來補救他們的設計.
出名的IE Bugs有以下幾項:
Double Float-Margin Bug
Duplicate Indent Bug
Float Model Problem
Three Pixel Text Jog
Escaping Floats Bug
Creeping Text Bug
Phantom Box Bug
Peekaboo Bug
Inherited margins on form elements
Expanding Box Problem
Line-height Bug
Disappearing List-Background Bug
Guillotine Bug
IE 6 Duplicate Characters Bug
....
可以看得出, 設計師的工作量一定會倍增. 其實以上的bugs都是由一個IE獨有的屬性”hasLayout”所影響的,
如果深入了解這個屬性, 那麼就可以輕易地解決90%的IE Bugs.
介紹”hasLayout”:
“hasLayout”是IE內部的一個屬性, 它決定了一個<div>或者任何一個元素, 在網頁中如何與元素內的內容,
元素與元素之間的互動. 就是說, “hasLayout”決定了每一個HTML元素在網頁中的表現. 微軟的工程師用這個”hasLayout”來為每個HTML元素定下它們的屬性. 在CSS中, 我們可以通過特定的CSS屬性來激發這個
”hasLayout”屬性.
“hasLayout”這個屬性有兩個值, Ture和False, 如果一個元素有”layout”的, 值就是True; 相對的, 如果元素沒
有”layout”, 值就是flase. 設計師可以用一些CSS的屬性來激發這個”hasLayout”屬性, 從而修改設計在IE中的效果.
因為CSS的語言裡沒有一個屬性是叫hasLayout, 所以我們不可以這樣設定:
body {
hasLayout=true;
}
這是不可能的.
但是有一些個別的CSS屬性是可以把hasLayout的屬性值, 轉變為True, 或者False.
預設有Layout的HTML元素:
<html> <body>
<table> <tr> <th> <td>
<img>
<hr>
<input> <button> <select> <textarea> <fieldset> <legend>
<iframe> <embed> <object> <applet>
<marquee>
可以觸發”hasLayout”的CSS屬性:
針對IE6的CSS屬性:
position:absolute
float:left, right
display:inline-block
width: 大於0, 但不包括auto
height:大於0, 但不包括auto
zoom:1 (Ie獨有的屬性)
writing-mode:tb-rl
針對IE7 的CSS屬性:
overflow: hidden, scroll, auto
overflow-x, overflow-y: hidden, scroll, auto
position:fixed
還原”hasLayout”的CSS屬性:
針對IE6的CSS屬性:
width, height: auto
position:static
float:none
zoom:normal
writing-mode: lr-tb
針對IE7的CSS屬性:
max-width, max-height: none
overflow: visible
應用:
當每位設計師完成了一份符合國際標準的CSS設計後, 是不是要為IE的CSS再完整的設計另一份? 答案是不用的.
我們可以用一個叫” Conditional Comments” 的方法來引進要更改的CSS. 利用CSS覆蓋的特性, 我們只要
更改在IE中有問題的CSS就可以了.
“Conditional Comments”
<head>
<link type="text/css" rel="stylesheet" media="all" href="/default/main.css" />
<!--[if lte IE 6]>
<style>
.hasLayout { height: 1px; }
</style>
<![endif]-->
<!--[if IE 7]>
<style>
.hasLayout { zoom: 1; }
</style>
<![endif]-->
</head>
從以上的例子, IE會先下載main.css, main.css裡面的.hasLayout會被style裡的.hasLayout覆蓋.
lte 意思是 less than and enqual to
lt 意思是 less than
如果我現在用的是IE6, 那麼
<!--[if lte IE 6]>
<style>
這裡的CSS就會蓋過main.css.
</style>
<![endif]-->
if IE 7, 就特別指定 IE 7. 這個conditional comment只有IE才會識別, 其他的瀏覽器都不會被影響到,
是個比較安全和容易管理的做法.
沒有留言:
張貼留言