css padding在ie6,ie8,firefox中相容性用法

來源:互聯網
上載者:User

css padding中文意思是內間距,也就是指div,p,span等視窗內容邊距了,它分為padding-top padding-right padding-bottom padding-left 四面, 但padding在不同瀏覽器中表現不同,本文章就是告訴你解決這些不相容的問題。
-
CSS padding 屬性定義元素的內邊距。 padding 屬性接受長度值或百分比值,但不允許使用負值。

例如,如果您希望所有 h1 元素的各邊都有 10 圖元的內邊距,只需要這樣:

h1 {padding: 10px;} 您還可以按照上、右、下、左的順序分別設置各邊的內邊距,各邊均可以使用不同的單位或百分比值:

代碼如下
h1 {padding: 10px 0.25em 2ex 20%;}


假設現在設置一個padding值,這個值在FF、IE8、IE6中都不一樣
首先考慮的是FF下的值

代碼如下
.test{padding:10px}

接著考慮IE8下的值

代碼如下
.test{padding:10px;*padding:9px}

最後考慮IE6下的值

代碼如下
.test{padding:10px;*padding:9px;_padding:8px}

這樣就可以了。
做相容性時,最先考慮FF、opera這些瀏覽器,最後考慮IE6。
拿上例來說,IE8、IE6都可識別*,但FF不能識別。
所以拿*來做IE8的Hack,而_在FF和IE8中都不識別,只有IE6能識別,所以用_做IE6的Hack

上面我們講了padding其實它還可以這樣寫

單邊內邊距屬性
也通過使用下面四個單獨的屬性,分別設置上、右、下、左內邊距:

代碼如下
padding-top
padding-right
padding-bottom
padding-left

您也許已經想到了,下面的規則實現的效果與上面的簡寫規則是完全相同的:

代碼如下
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}


瀏覽器支援
所有瀏覽器都支援 padding 屬性。

注釋:任何的版本的 Internet Explorer (包括 IE8)都不支援屬性值 "inherit"。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.