我們再來接續SEO網頁跨瀏覽器開發:CSS的金科玉律(一),來說明如何在提高SEO成效下,做好跨瀏覽器開發的網頁設計。
以下是使用 float 和 clear 屬性的一些重要準則:
一個 float 物件,將從其置身的 block 級非 float 內容流中跳出,換句話說,如果你要將一個 box 向左邊 float,它後面的 block 級非 float 物件會顯示到下方,inline 級內容會在旁邊包圍
要讓一段內容從一側包圍一個 float 物件,這段內容必須要麼是 inline 級的,要麼也設置為相同方向的 float
一個 float 物件,如果沒有設置寬度,則會自動縮成其包含的內容的寬度,因此最好為 float 物件明確設置寬度
如果一個 block 物件包含 float 子物件,會出現問題。
一個設置了 clear 屬性的物件,將不會包圍其前面的 float 物件
一個既設置了 clear 又設置了 float 屬性的物件,只有 clear:left 屬性生效,clear:right 不起作用首先使用 IE 進行測試
雖然以網頁設計者的立場而言,我們都痛恨 IE6 和 IE7,但畢竟還是不少人在使用IE6 和 IE7。所以,當你開始一個新專案的時候,最好還是首先針對這兩種瀏覽器進行測試,否則,如果你在設計在後期才想起針對 IE6 和 IE7 進行測試,將可能會出現某些問題。
某些 Form 控制項,如果要求必須跨瀏覽器一致,可以找到變通辦法,如,可以使用圖片 替代 submit 按鈕,但有一些控制項,比如 radio,select, textarea,檔選擇框,是永遠都不可能一模一樣的。
字體的表現都有差異
先不談有的字體在有的系統中根本不存在,即時存在,它們在不同系統的渲染效果也不完全一樣,比如,Windows ClearType 支持 IE7,但不支援 IE6,導致同一個字體在 IE7 和 IE6 有不同的樣子。
使用 CSS 清零
使用 CSS 清零(CSS Reset)是實現跨瀏覽器相容的靈丹妙藥,CSS 清零可以消除不同瀏覽器對 margin,padding 這些屬性的預設表現,你可以更容易控制諸如對齊,間隙等等問題。
我們之所以要跨瀏覽器開發,是希望不管使用那種瀏覽器的用戶所看到的網頁效果,能夠盡量一樣,進而提高用戶體驗和黏度,以達到SEO的目標效果。所以在進行網頁設計時,最好能記住以上各點,對於跨瀏覽器開發將會達到不錯的效果。
留言列表