CSS Hacks 與解決方案

內容轉載自www.solidstategroup.com
這是Solid State Group網站上的一篇很好的文章,解決了CSS在設計中遇到的很多問題。

1、這篇文章闡述了8條在CSS設計中有用的解決方案。

2、指定特定瀏覽器的選擇器:當你要對特定的瀏覽器指定樣式,而不影響到其他瀏覽器。

IE 6 及以下瀏覽器

* html {}

IE 7 及以下瀏覽器

*:first-child+html {} * html {}

僅對IE 7

*:first-child+html {}

IE 7 及最新的瀏覽器

html>body {}

最新的瀏覽器(但IE 7除外)

html>/**/body {}

目前的Opera versions 9 及以下瀏覽器

html:first-child {}

針對Safari瀏覽器

html[xmlns*=""] body:last-child {}

要使用這些選擇器,請在樣式前寫下這些代碼。例如:

#content-box {
width: 300px;
height: 150px;
}

* html #content-box {
width: 250px;
} /* 重寫上面的代碼並且把寬度改為250PX
在IE6以下版本中適用。 */

3、在IE6中使用透明PNG圖片

IE6的一個很難處理的BUG就是它不支持透明PNG圖片。需要重寫的CSS的濾鏡來解決這個問題:

* html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale");
}

4、去掉連接虛線框

當你點擊鏈接時,Firefox會在鏈接周圍產生一個虛線外框。



這個很好解決,只需在a標籤中添加outline:none就可以了。

a{
outline:none;
}
5、對inline元素應用寬度。

如果你對一個inline元素使用寬度,它將只在IE6下起作用。

所以的HTML標籤要麼是Block的,要麼就是inline的。
inline屬性的標籤有
Block標籤包括


  • 你不能控制inilne標籤的寬度,不過有一個方法是把標籤屬性從inline改為Block。

    span{
    width:150px;
    display:block;
    }
    應用display:block能夠把span標籤變成block標籤,從而控制它的寬度。

    6、使一個固定寬度的網站居中。
    為了讓你的網站在瀏覽器中居中,可以為最外層Div添加position:relative屬性,然後將margin設為auto。
    To centre your website within the browser, add relative positioning to the outer div, then set the margin to auto.

    #wrapper {

    margin: auto;

    position: relative;

    }





    7、圖片替換技術

    對於表頭headings來說,永遠是最好用文字而不是圖片。在你必須要用圖片的某個特殊情況下,最好使用隱藏文字圖層的背景圖片。這對於螢幕閱讀和SEO非常有用,儘管依然使用很普通的文字,這可以聯想到所有的優點。
    HTML:

    Main heading one



    CSS:

    h1 {
    background: url(heading-image.gif) no-repeat;
    }

    h1 span {
    position:absolute;{
    text-indent: -9999px;{
    }

    正如你所見,我們對H1標籤使用普通的HTML代碼,用CSS來將圖片替代文字。Text-indent把文字放到左邊9999像素處,從而用戶看不到它們。
    即使將CSS檔案關閉,仍然可以知道表頭headings的意義。

    8、最小寬度

    IE的另外一個Bug就是它不支持min-width屬性。min-width確實非常有用,特別是對於100%寬度的可變模板來說,因為他告訴瀏覽器停止收縮。

    對於除IE6以外的所有瀏覽器來說你只需設定min-width:?px; 例如:

    .container {
    min-width:300px;
    }

    要讓這些在IE6下起作用的話!你需要創建兩個DIV,一個包含著另一個。


    Content



    後你需要設置外面層的min-width:

    .container {
    min-width:300px;
    }

    現在又要IE hack起作用了,你需要寫下以下代碼:

    * html .container {
    border-right: 300px solid #FFF;
    }
    * html .holder {
    display: inline-block;
    position: relative;
    margin-right: -300px;
    }

    當瀏覽器調整外層寬度來適應直到它縮小到horder的寬度時,這個時候它就不能夠在縮小了。而holder層也會停止收縮。外層的邊框寬度變成了內層的最小寬度。

    1. 隱藏水平的捲軸 Hide horizontal scrolling

    要去除水平捲軸,可以在body中插入overflow-x:hidden屬性。

    body {
    overflow-x: hidden;
    }

    這在你決定要用一個比瀏覽器寬的圖片或Flash時很有用。
  • 張貼留言

    這個網誌中的熱門文章

    互補色與對比色解惑

    [讀書心得] 設計思維 Design Thinking

    龍岡手繪地圖製作有感